兄弟姐妹如何在以下指令结构下共享其范围

Question

我有以下指令结构。

<test-widget-body>
<test-task-list-filter>
</test-task-list-filter>
<test-task-list>
<test-datatable config="dtConfig" columns="dtColumns" api="dtApi"></test-datatable>
</test-task-list>
</test-widget-body>

以下是相应的指令：

测试数据表

angular.module('testDatatable').directive('testDatatable', function () {
var directive = {
controller: 'testDatatableController',
restrict: 'E',
replace: true,
scope: {
config: '=',
columns: '=',
api: '=',
},
link: lnkFunction,
template: '<table class="table"></table>',
};
return directive;
}

测试任务列表

angular.module('testTask').directive('testTaskList', function () {
return {
transclude: true,
restrict: 'E',
controller: 'testListController',
controllerAs: 'vm',
templateUrl: '/app/test/directives/test-list/test-list.html',
link: {
pre: preLink
}
};
function preLink(){
var dtColumns = [{
----
}];
var dtConfig =[];
var dtApi =[];
}
}

testTaskListFilter

angular.module('testTask').directive('testTaskListFilter', function () {
return {
restrict: 'E',
controller: 'testListFilterController',
templateUrl: '/app/test/directives/test-list/test-list-filter.html'
};
});

testWidgetBody

angular.module('testWidgetGrid').directive('testWidgetBody', function () {
return {
templateUrl: 'test.html',
link: function ($scope, element) {
}
}

在这里，我可以访问控制器testListFilterControllerdtConfigdtColumnsdtApi对象。 这怎么可能，因为<test-task-list-filter>和<test-task-list>是兄弟姐妹。 谁能解释一下在这种情况下发生了什么。

注意：当我执行某些单击操作而不是在指令渲染时，我能够访问该对象。

Answer 1

如果您查看testTaskListFilter指令和testTaskList指令的声明，它们都没有隔离的作用域。您可以通过在指令中执行以下操作之一来声明隔离作用域：scope: true或scope: {}(如在testDatatable中)指令。

因此，任何不声明其自身作用域的指令都会继承其父级的作用域。因此，testTaskListFilter和testTaskList都使用相同的范围。这意味着您可以

访问控制器内的dtConfigdtColumnsdtApi对象testListFilterController

这是 Angular wiki 帖子，用于了解范围和范围继承