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;

}

testTaskList

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) {

}

}

在这里，我可以访问dtConfig控制器内的dtColumns dtApi testListFilterController个对象。由于<test-task-list-filter>和<test-task-list>是兄弟姐妹，这怎么可能呢？任何人都可以解释这种情况下发生的事情。

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

Answer 1

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

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

访问dtConfig控制器内的dtColumns dtApi testListFilterController个对象

这是用于理解范围和范围继承的Angular wiki post

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

1 个答案: