从子指令访问父指令范围的最佳方法是什么？答案

【问题标题】：What is the best way to access parent directive scope from child directive?从子指令访问父指令范围的最佳方法是什么？
【发布时间】：2017-02-21 03:18:40
【问题描述】：

AngularJS 模块和指令

angular.module('tabApp', [])

.directive('tabPanel', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div><div tab-content></div>',
        link: function (scope) {
            alert(scope.isOpen);
        }
    };
})

.directive('tabContent', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div>Content</div>',
        link: function (scope) {
            alert(scope.isOpen);
        }
    };
});

HTML

<div ng-app="tabApp">
    <div tab-panel is-open="true"></div>
</div>

我需要 tabContent 来访问 tabPanel 中的 isOpen 属性吗？实现这一目标的最佳和最短方法是什么？

【问题讨论】：

您应该为指令/组件创建控制器，然后您可以使用require 属性和ctrls 参数。见docs.angularjs.org/api/ng/service/$compile#-require-

标签： angularjs angularjs-directive

【解决方案1】：

您只需将 is-open 从父指令传递给子指令...

.directive('tabPanel', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div><div tab-content is-open="isOpen"></div>',
        //...
    };
})

查看jsFiddle

【讨论】：

哇，没想到答案会这么简单，谢谢。

【解决方案2】：

将子指令定义更改为

.directive('tabContent', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div>Content</div>',
        link: function (scope, attr, element, tabApp) {
            alert(scope.isOpen);
        },
        require: '^tabApp'
    };

然后使用链接函数接收tabApp，类似于this

【讨论】：

谢谢，但这不是我想要的答案，因为
可以放在 HTML 的任何位置。如果
是嵌套结构，'^tabApp' 将不再起作用。
所以让它成为可选的