Wie Geschwister ihren Geltungsbereich unter der folgenden Direktivenstruktur teilen

Question

Ich habe folgende Direktivenstruktur.

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

Hier sind entsprechende Richtlinien:

Test-Datentabelle

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

} 

} 

Hier bin ich in der Lage dtConfigdtColumnsdtApi Objekte innerhalb testListFilterController Controller zuzugreifen. Wie ist das möglich, da <test-task-list-filter> und <test-task-list> Geschwister sind. Kann jemand erklären, was in diesem Szenario passiert.

Hinweis: Ich bin in der Lage, auf dieses Objekt zuzugreifen, wenn ich einige Klick-Aktion nicht während Direktive-Rendering durchführen.

Answer 1

Wenn Sie sich die Deklarationen für testTaskListFilter Direktive und die testTaskList Direktive ansehen, hat keiner von ihnen isolieren Bereiche. Sie können Isolate-Bereiche durch Ausführen einer der folgenden Anweisungen in der Direktive deklarieren: scope: true oder scope: {} (wie in Ihrer testDatatable) -Richtlinie.

Daher erbt jede Direktive, die ihren eigenen Bereich nicht deklariert Parent. So verwenden testTaskListFilter und testTaskList beide den gleichen Bereich. Das bedeutet, dass Sie dann in der Lage zu

Zugang dtConfigdtColumnsdtApi Objekte innerhalb testListFilterController Controller

Hier ist die Angular wiki post für das Verständnis Bereich und Umfang Vererbung