每个独立指令中的范围是否在该指令中是独立的和私有的？答案

【问题标题】：Are scopes within each independent directive isolated and private within that directive?每个独立指令中的范围是否在该指令中是独立的和私有的？
【发布时间】：2013-12-10 05:02:32
【问题描述】：

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 指令中的范围对象在 dir-view 中是不可访问的。

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

每个指令中的作用域是独立于该指令的吗？

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

如果可能的话，请指导我阅读有关 Angular js 范围的好文档。

附加我从 angular debug chrome 插件获得的范围屏幕

我的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
        };
    })

【问题讨论】：

您的问题包含很多内容，但尚不完全清楚您的目标是 IMO。如果您也可以发布一个 plunkr 或 jsfiddle 以显示问题的实际效果，这将有所帮助...从您的描述来看，您想在指令定义对象中使用 require 来访问另一个指令的控制器否则，您可能会受益于使用服务或值在指令之间共享一些数据。
我会想出一个 plunkr
是的会看那个教程..
这是一个网站，在相当短的部分中有很多很好的教程：egghead.io/search?q=directive
是的，正在调查。并将很快找到解决方案。感谢您的帮助。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

我如何让两个指令进行通信？

概念：这两个指令是同级的。为每个指令创建了一个新的范围，在图中清晰可见。因此，要让这两者进行通信，就需要引入一个服务并注入到每个指令中，但这会带走指令的可重用性并在它们之间带来很强的依赖关系。所以我们应该想办法在不影响可重用性的情况下做到这一点。

由于它们是兄弟姐妹，因此想法是通过 parent 进行通信，因此只需引入一个控制器即可

$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

【讨论】：