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

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';
    }]);

在示例中，我有两个指令 - 一个尝试通过隔离范围提取属性，另一个仅继承父范围。 “dir2”指令似乎按预期工作，而“dir”指令（隔离范围指令）似乎实际上取消了在父指令中传递的属性。

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

谢谢！

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/