嵌套指令的角度隔离范围 [英] Angular Isolate Scope for nested directives

问题描述

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

I'm attempting to set up an angular app with three directives - container, getter and setter. I've put it up at 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同时显示和更改值.

Container has a scope with the variable value which can be read by getter and setter. getter displays the value whilst setter both displays and changes the value.

    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.

Both getter and setter have their own isolate scope but also have a two-way binding to the container scope to get and set 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:'='}会建立两种方式的绑定，但显然没有.

At the moment, getter and setter can access the container scope using $scope.$parent.$parent.value but that seems way too clunky. I thought using scope:{value:'='} would set up two way bindings but apparently not.

我在做什么错了?

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

推荐答案

指令隔离范围不会自动链接到父范围中的变量.您必须告诉指令在父作用域中value应该是value，与提供指令名称的方式相同.

The directive isolate scope is not automatically linked to variables in the parent scope. You must tell the directive that value is supposed to be value in the parent scope, the same way you supply the directive name.

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

这篇关于嵌套指令的角度隔离范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！