Angular 隔离嵌套指令的作用域

Question

我正在尝试使用三个指令设置一个 angular 应用程序 - 容器、getter 和 setter。我把它放在 http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview

<container>
    <getter name="first"></getter>
    <getter name="second"></getter>
    <setter name="setter"></setter>
</container>

Container 有一个变量 value 的作用域，可以被 getter 和 setter 读取。 getter 显示值，而 setter 显示和更改值。

    angular.module("app").directive('container', function() {
      return {
        scope: {},
        template: '<h1>Container <input ng-model="value"/></h1><div ng-transclude>SCOPED1</div>',
        transclude: true,
        controller: ["$scope", "$window", function($scope, $window){
            $scope.value = "Hello"
        }]
      };
    });

getter 和 setter 都有自己的隔离范围，但也有双向绑定到 container 范围以获取和设置 value。

    angular.module("app").directive('getter', function() {
      return {
        require: '^container',
        scope: {
            name: '@',
            value:'='
          },
        template: '<p>I am getter {{name}}, I got {{value}}</p>'
      };
    });

目前，getter 和 setter 可以使用 $scope.$parent.$parent.value 访问 container 作用域，但这似乎太笨拙了。我认为使用 scope:{value:'='} 会设置双向绑定，但显然不是。

我做错了什么？

http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview

Answer 1

指令隔离作用域不会自动链接到父作用域中的变量。您必须告诉指令 value 在父范围内应该是 value，就像您提供指令名称一样。

<container value="value">
    <getter name="first" value="value"></getter>
    <getter name="second" value="value"></getter>
    <setter name="setter" value="value"></setter>
</container>

Angular 隔离嵌套指令的作用域

Angular Isolate Scope for nested directives

javascript

angularjs

isolate-scope