1

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

这是一个总结我的问题的例子： 小提琴链接 视图：

<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”指令（隔离范围指令）似乎实际上取消了在父指令中传递的属性。

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

谢谢！

4

2 回答 2

1

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

scope: {               
  foo:'@isolate_foo',
}

和

scope: {               
  foo:'@isolateFoo',
}

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

对此的解释在Angular 文档中：

指令具有驼峰式名称，例如 ngBind。可以通过使用这些特殊字符 :、- 或 _ 将驼峰式名称转换为蛇形大小写来调用该指令。

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

于 2013-10-05T03:54:36.367 回答
0

这是工作示例：

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/

于 2013-10-05T00:55:35.757 回答