Question

我试图了解隔离范围是如何工作的，并且显然缺少一些非常基本的东西。我试图通过选择框设置范围属性，然后将此属性传递给指令的隔离范围，但它似乎没有正常工作。

这是一个总结我的问题的例子： fiddle link 观点：

<div ng-controller="MyCtrl">
   <select name='optionfoo' ng-model='foo'>
       <option>a</option>
       <option>b</option>
    </select>
    value: {{foo}}
    <div id='dir' isolate_foo="{{foo}}" dir></div>
    <div id='dir2' foo="{{foo}}" dir2></div>
</div>

js代码：

var myModule = angular.module('myModule', [])
    .directive('dir', function () {
        return {
            restrict:'A',
            template: 'isolate foo: {{foo}}',
            scope:{               
                foo:'@isolate_foo',
            }        
        };
    }).directive('dir2', function () {
        return {
            restrict:'A',
            template: 'parent foo:{{foo}}', 
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'b';
    }]);

在这个例子中，我有两个指令 - 一个试图通过isolate scope引入一个属性，另一个只是继承父作用域。 'dir2'指令似乎按预期工作，而'dir'指令（隔离范围指令）似乎实际上取消了在父指令中传递的属性。

我确信这是一个noob问题，但我花了几个小时搜索，却没有弄清楚我做错了什么。任何建议将不胜感激。

谢谢！

Answer 1

这只是命名约定的问题。替换

scope: {               
  foo:'@isolate_foo',
}

与

scope: {               
  foo:'@isolateFoo',
}

它会起作用。这是您应用该修复程序的jsFiddle。

对此的解释是Angular docs：

指令有诸如ngBind之类的骆驼名称。该指令可以通过将驼峰案例名称翻译成蛇案例来调用特殊字符：， - 或_。

因此，如果您将标记定义为isolate_foo，Angular将按照设计将其值映射到指令范围内名为isolateFoo的属性。

Answer 2

以下是工作示例：

http://jsfiddle.net/roadprophet/SPMfT/161/

var myModule = angular.module('myModule', [])
    .directive('dir', function () {
        return {
            restrict:'A',
            template: 'isolate foo: {{foo}}',
            scope:{               
                foo:'@',
            }        
        };
    }).directive('dir2', function () {
        return {
            restrict:'A',
            template: 'parent foo:{{foo}}', 
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        $scope.foo = 'b';
    }]);

修改

以下是您的问题的澄清版本：http://jsfiddle.net/roadprophet/SPMfT/163/

隔离范围指令不更新模板？

2 个答案: