메서드 (&) 및 모델 (=) 바인딩 대신 부모 'vm'개체를 사용자 지정 지시문에 전달

Question

일부 사용자는 이해할 수 있습니까?

나는 컨트롤러에 포함 된 사용자 정의 지시를하고 난 여러 페이지에는 표시되는 지시 템플릿 버튼을 포함하고 해당 행동이 지시어에 포함 된 컨트롤러에서 처리됩니다에서 동일한 지침을 사용하고 싶습니다.

Controller 
------------------------------------------------------------------------ 
angular 
    .module('test') 
    .component('approval', { 
     template: '<data-table scopeObj ="vm"></data-table>', 
     controller: 'PendingApprovalsController', 
     controllerAs: 'vm' 
    }) 
    .controller('approvalController', approvalController); 

    approvalController.$inject = ['$scope']; 
    /* @ngInject */ 
    function approvalController($scope) { 

    var vm = this; 


    vm.search1 = function(val) { 
     console.log("search1::", val); 
    }; 

    vm.search2 = function(val) { 
     console.log("search2::", val); 
    }; 
    vm.search3 = function(val) { 
     console.log("search3::", val); 
    }; 
    vm.search4 = function(val) { 
     console.log("search4::", val); 
    }; 
    vm.search5 = function(val) { 
     console.log("search5::", val); 
    }; 

    } 

Directive 
--------------------------------------------------------------------- 
angular.module('test') 
    .directive('dataTable', dataTable) 
    .controller('dataTableController', dataTableController); 

function dataTable() { 
    return { 
     scope: { 
     scopeObj: '=' 
     }, 
     controller: 'dataTableController', 
     controllerAs: 'vm', 
     template: '<button class="btn-default" ng-click="scopeObj.search1('search1')">Button1</button> <button class="btn-default" ng-click="scopeObj.search2('search2')">Button2</button>+ 
     <button class="btn-default" ng-click="scopeObj.search3('search3')">Button3</button><button class="btn-default" ng-click="scopeObj.search4('search4')">Button4</button>' 
    }; 
    } 


    dataTableController.$inject = ['$scope']; 
    function dataTableController($scope) { 

    var vm = this; 

    } 

1. 지시어 범위를 false로 만들고 조각 페이지 전체에서 방향을 재사용 할 수 있습니까? { 방법 항목 : '&'방법 2

2.Can는이 I 대신

범위

<data-table method1="vm.search1(val)" method2="vm.search2(val)" method3 ="vm.search3(val)" method4="vm.search1(val)"></data-table> 

같은 개별 방법을 전달하고 지정 내부 그들을 액세스하는 지시자 컨트롤러 "VM"객체를 전달할 '&'의 Method3 : '&', method4 '&' 은}

내가 너무 많은 방법을 가지고로 다루다.

Answer 1

예, 이것은 확실히 당신이 할 수있는 일이지만, 일이 순서를 다음과 같이 변경해야합니다 :

• 이 지시어 이름으로 dataTable을 사용하지 마십시오. AngularJS는 발견 한 모든 지시문에서 data을 제거하므로 지시문 이름으로는 data을 사용할 수 없습니다. data은 속성으로 작업 할 때 예약 된 키워드입니다. 대신 statTable을 시도하십시오.
• <을 사용하여 scopeObj을 바인딩하면이 문제에 대한 단방향 바인딩 만 필요하기 때문입니다.
• bindToController을 true과 동일하게 설정하면 구문을 사용하여 scopeObj의 방법에 도달 할 수 있습니다.
• 템플릿에 scope-obj을 특성 이름으로 사용해야합니다. 속성은 범위에서 camelCase로 참조되지만 템플릿에서 케밥 경우에 있음을 기억하십시오 (지시문 정의와 유사). (우리가 controllerAs 구문 여기를 사용하고 있기 때문에) scopeObj이 vm의 한 속성입니다 당신 때문에, 직접 scopeObj.method() 반대로 statTable 템플릿에서
• , vm.scopeObj.method()를 호출합니다.

모두 넣으면 원하는 효과를 얻을 수 있습니다. 제안 된 변경 사항에 아래의 코드를 체크 아웃 :

angular.module('test', []) 
    .directive('statTable', statTable) 
    .controller('statTableController', statTableController) 
    .directive('testDirective', testDirective) 
    .controller('testDirectiveController', testDirectiveController); 

function statTable() { 
    return { 
    scope: { 
     scopeObj: "<" 
    }, 
    bindToController: true, 
    controller: "statTableController", 
    controllerAs: "vm", 
    template: "<button class='btn-default' ng-click='vm.scopeObj.search1(\"search1\")'>Button1</button> <button class=\"btn-default\" ng-click=\"vm.scopeObj.search2('search2')\">Button2</button> <button class=\"btn-default\" ng-click=\"vm.scopeObj.search3('search3')\">Button3</button>" 
    }; 
} 

function statTableController() { 
    var vm = this; 
    vm.log = console.log; 
} 

function testDirective() { 
    return { 
    controller: "testDirectiveController", 
    controllerAs: "vm", 
    template: "<stat-table scope-obj='::vm'></stat-table>" 
    } 
} 

function testDirectiveController() { 
    var vm = this; 

    vm.search1 = function(val) { 
     console.log("search1::", val); 
    }; 

    vm.search2 = function(val) { 
    console.log("search2::", val); 
    }; 

    vm.search3 = function(val) { 
    console.log("search3::", val); 
    }; 
} 

클릭 here을 작업 JSFiddle을 위해. 단추를 클릭하면 원하는 효과가 생성됩니다.