メソッド（＆）とモデル（=）バインディングの代わりに親 'vm'オブジェクトをカスタムディレクティブに渡す角度

Question

これを理解してもらえますか？

私は、コントローラに含まカスタムディレクティブを持っていると私は、複数のpages.Theディレクティブのテンプレートは、ボタンが含まれていると、それに対応するアクションがディレクティブが含まれているコントローラで処理される間で同じディレクティブを使用します。

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.Can I代わり

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

ような個々のメソッドを通過し、指令

スコープ内にそれらにアクセスするためのコントローラ指令に 'VM' オブジェクトを渡す：{ 法1： '&'、方法2 ： '&'、法3： '&'、法4： '&' }

私はあまりにも多くの方法を持って処理する。

Answer 1

はい、これは間違いなくあなたが行うことができるものですが、これが機能するためには、以下の変更を加える必要があります：

• あなたのディレクティブ名としてdataTableを使用しないでください。 dataは、指定されたすべてのディレクティブからAngularJSがdataを取り除くため、ディレクティブ名として使用できません。 dataは、属性を操作するときに予約されたキーワードです。代わりにstatTableを試してください。
• <を使用してscopeObjをバインドするには、この問題の一方向バインディングのみが必要です。
• をtrueに設定してstatTableに設定し、controllerAs構文を使用してscopeObjの方法に到達できるようにします。
• テンプレートには、属性名としてscope-objを使用してください。属性はcamelCaseでスコープ内で参照されますが、テンプレートではkebab-caseになります（ディレクティブの定義に似ています）。 statTableテンプレートで
• 、直接scopeObj.method()とは対照的に、（ここではcontrollerAs構文を使用しているので）あなたのscopeObjがvmの財産であることから、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ため。ボタンをクリックすると、目的の効果が得られます。