当我将 Angular 的版本更改为 1.0.1 到 1.2.27 时，指令不起作用

Question

以下可能是运行 in demo 这里。

这是html:


    父范围
     // 更新以查看父作用域如何与组件作用域交互

    


    
    <我的组件属性-foo="{{foo}}" 绑定-foo="foo"
        隔离表达式 foo="updateFoo(newFoo)" >
        属性
        
            获取 {{isolatedAttributeFoo}}
        
        
            设置： 
            // 这不会更新父作用域。
        
        绑定
        
            获取 {{isolatedBindingFoo}}
        
        
            设置： 
            // 这会更新父作用域。
        
        表达式


        
            <输入 ng-model="isolatedFoo">
            
            // 这会在父作用域上调用一个函数。

这是 js:

var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.foo = 'Hello!';
    $scope.updateFoo = function (newFoo) {
        $scope.foo = newFoo;
    }
}]);

这应该是 directives.However 中三种范围绑定的一个很好的例子，当我尝试切换更高的 angular 版本时它不起作用 - (1.2.27)。我怀疑指令中继承范围的影子，但我不确定。

Answer 1

这不会像您预期的那样工作。隔离范围被创建并提供给指令的 Link、Compile 和 Template 部分。但是，Element 本身中的 HTML 实际上并不是指令的一部分。那些 HTML 部分仍然绑定到父 $scope。如果您倾向于将独立的作用域对象命名为相同的名称，则您可能只是无意中针对 $scope 而没有注意到任何不良影响。如果您的 HTML 在 Template 中而不是在 Element 中，它将访问隔离范围。

例如，在 Element 中内联的 HTML 中，您可以调用 updateFoo()，但在 Template 中这是不可能的

当我将 Angular 的版本更改为 1.0.1 到 1.2.27 时，指令不起作用

Directive doesn't work when I which the version of Angular to 1.0.1 to 1.2.27

angularjs

angularjs-directive

angularjs-scope

父范围

属性

绑定

表达式