Question

html代码如下

<div class="dir-view" >
    // unable to get {{ button.content }}
    <button type="button" id="notworking" ng-show="button.content.length" >{{ button.content }}</button>

</div>
<div class="dir-design" >
     //able to get {{ button.content }}
    <button type="button" id="working" ng-show="button.content.length" >{{ button.content }}</button>
    <div class="control-group">
        <label class="label label-primary" for="button-content">BUTTON CONTENT :</label>
        <div class="controls">
            <textarea class="form-control" id="button-content" rows="4" cols="50" ng-model="button.content"></textarea>
        </div>
    </div>
</div>

在上面的代码中，dir-view和dir-design是我定义的自定义指令。

在div＃dir-view中的按钮标记中，我无法获得{{button.content}}。

而在div＃dir-design中，我可以获得{{button.content}}。

我认为dir-design中的scope对象在dir-view中是不可访问的。

这就是我无法在dir-view中访问 {{button.content}} 的原因。

每个指令中的范围是否与该指令隔离并且是私有的？。

如果我是对的，有人可以通过制作一个指令dir-design的 {{button.content}} 来引导我解决这个问题，即使在dir-view中也可以访问（即邻近指令）。

如果可能的话，请指导我关于角度js范围的好文件。

附加我从angular debug chrome插件获得的示波器屏幕 enter image description here

我的controller.js文件内容显示指令

angular.module('modFoundation', ['$strap.directives'])
     //directive to include view panel
    .directive('dirView', function() {
       return {
           restrict : 'CAME',
           templateUrl: 'templates/view.html',
           transclude: true
       };
    })
    //directive to include design panel
    .directive('dirDesign', function() {
        return {
            restrict : 'CAME',
            templateUrl: 'templates/design.html',
            transclude: true
        };
    })

Answer 1

我是如何让两个指令沟通的？

概念：这两个指令是兄弟姐妹。为每个指令创建了一个新的范围，在图中清晰可见。因此，为了使这两个通信一个是引入服务并注入每个指令，但这会消除指令的可重用性并在它们之间产生强烈的依赖性。所以我们应该找到一种方法来做到这一点而不影响可重用性。

由于这些是兄弟姐妹，我们的想法是通过父母进行沟通，所以只需要介绍一个简单的控制器

$ scope.button = {}

完成。

要了解两个孩子之间沟通的想法，以下代码将会有所帮助。

> $scope
Scope {$id: "002", $$childTail: Child, $$childHead: Child, $$prevSibling: null, $$nextSibling: null…}

> child1 = $scope.$new()
Child {$id: "005", this: Child, $$listeners: Object, $parent: Scope, $$asyncQueue: Array[0]…}

> child2 = $scope.$new()
Child {$id: "006", this: Child, $$listeners: Object, $parent: Scope, $$asyncQueue: Array[0]…}

> child1.$parent
Scope {$id: "002", $$childTail: Child, $$childHead: Child, $$prevSibling: null, $$nextSibling: null…}

> child2.$parent
Scope {$id: "002", $$childTail: Child, $$childHead: Child, $$prevSibling: null, $$nextSibling: null…}

> $scope.button = {}
Object {}

> child1.button
Object {}

> child2.button
Object {}

> child1.button.c1v1 = "hello"
"hello"

> child2.button.c1v1
"hello"

> child2.button.c2v2 = "world"
"world"

> child2.button.c2v2
"world"

> $scope.button.c1v1
"hello"

> $scope.button.c2v2
"world"





           $scope 
              |
     _________|___________
    |                     |
    |                     |
   child1               child2

用例在jsfiddle中解释

不是工作案例：http://plnkr.co/edit/OoAuHzP8YW8NXk8I5qtc?p=preview

工作案例：http://plnkr.co/edit/bx4vBavcfwQYyeJqEkfU?p=preview

每个独立指令中的范围是否在该指令中被隔离和私有？

1 个答案: