テンプレートタグを使用してディレクティブへのコールバックをアングルでバインドします

Question

テンプレートを使用してコンポーネントにコールバックをバインドしようとしています。テンプレートには、別のディレクティブのインスタンスが含まれています。これはちょうどうまくいかないようです。私はモーダルからディレクティブを呼び出していますが、これが問題を引き起こすかどうかはわかりません。私は以前の質問で示唆されたソリューションの多くを試したが、まだ運がなかった。私は、デバッガでそれを実行し、 '$ ctrl.onSelectionChangedは' それが必要のように定義されています

function (locals) { return parentGet(scope, locals); } 

マイコード：

私-component.js：

inner-コールバックを参照しないディレクティブはありますか？

angular.module('myModule') 
.component('myComponent', { 
    template: '<div class="container-fluid"> <inner-directive><button class="btn btn-default center-block" ng-click="$ctrl.onSelectionChange({items_list: $ctrl.selectedItems})">Button</button> </inner-directive> </div>', 
    bindings: { 
     $router: '<', 
     onSelectionChange: '&' 
    }, 
    controller: MyComponentController 
}); 


/* @ngInject */ 
function MyComponentController(MyService, $filter, $log, $q) { 
    var $ctrl = this; 

    $ctrl.$routerOnActivate = function() { 

    }; 

    $ctrl.selectedItems = []; 
} 

呼び出す成分-controller.js：

function CallingComponentCtrl(toastr, $scope, $uibModal, $log) { 
    var $ctrl = this; 

    $ctrl.loadDone = false; 

    $ctrl.grid = { 
     enableSorting: true, 
     data: [], 
     columnDefs: [ 
      {name: 'id'}, 
      {name: 'name'}, 
      {name: 'description'} 
     ], 
     enableRowSelection: true, 
     enableRowHeaderSelection: false, 
     multiSelect: false, 
     noUnselect: true, 
     onRegisterApi: function (gridApi) { 
      $ctrl.gridApi = gridApi; 
     } 
    }; 

    this.$onInit = function() { 
     if (angular.isUndefined($ctrl.abc)) { 
      return; 
     } 
     syncData(); 
     $ctrl.loadDone = true; 
    }; 

    this.$onChanges = function() { 
     // TODO 
    }; 

    function syncData(){ 
     $ctrl.grid.data = $ctrl.abc; 
    } 

    $ctrl.myFoo = function(items_list) { 
     alert("This is never happening"); 
    }; 


$ctrl.onPress = function (event) { 
     var modalInstance = $uibModal.open({ 
      template: '<my-component on-selection-change="$ctrl.myFoo(items_list)"></my-component>', 
      windowClass: 'modal-window' 
     }); 
    }; 

} 

任意の考え？

Answer 1

まあ、問題が見つかりました。モーダルを呼び出す際に、テンプレートを使用してこのテンプレートのコンポーネントを使用しました。コンポーネントには、 '$ ctrl'で定義されたコールバックを渡しました。問題は、モーダルが独自のスコープを定義し、この$ ctrlに到達できなかったことです。そこで私はコントローラをモーダルに定義し、必要な関数を呼びました。これが私の解決策ですが、私は変化を強調し、追加します。

呼び出す成分-controller.jsを：

function CallingComponentCtrl(toastr, $scope, $uibModal, $log) { 
    var $ctrl = this; 

    .... 

    $ctrl.myFoo = function(items_list) { 
     alert("This is never happening"); 
    }; 


    $ctrl.onPress = function (event) { 
     var modalInstance = $uibModal.open({ 
      template: '<my-component on-selection-change="$ctrl.myNewFoo(items_list)"></my-component>', 
      **controllerAs: '$ctrl',** 
      windowClass: 'modal-window', 
      **controller: function($uibModalInstance){ 
       var $ctrl = this; 
       $ctrl.myNewFoo= function(items_list) { 
        $uibModalInstance.close(items_list); 
       }; 
      }** 
     }); 
     **modalInstance.result.then(function(items_list) { 
       $ctrl.myFoo(items_list); 
      });** 
    }; 

} 

Answer 2

$サービスをコンパイル

link: function(scope, element) { 
    var template = $compile('<div class="container-fluid"> <inner-directive><button class="btn btn-default center-block" ng-click="$ctrl.onSelectionChange({items_list: $ctrl.selectedItems})">Button</button> </inner-directive> </div>')(scope); 
    element.append(template); 
} 

はこれにあなたの子コンポーネントを変更しようとディレクティブの機能に

Answer 3

をコンパイルサービスを注入することを忘れないでください使用します

.component('myComponent', { 
    template: '<div class="container-fluid"> <inner-directive><button class="btn btn-default center-block" ng-click="$ctrl.onSelectionChange({items_list: $ctrl.selectedItems})">Button</button> </inner-directive> </div>', 
    bindings: { 
     $router: '<' 
    }, 
    require: { 
     parent: '^^CallingComponent' 
    }, 
    controller: MyComponentController 
}); 

を使用すると、継承が必要です親コントローラ。それは次のように宣言されていたときにあなたは$の範囲からそれを呼び出している

<my-component on-selection-change="$ctrl.myFoo(items_list)"></my-component> 

：

function MyComponentController(MyService, $filter, $log, $q) { 

    this.$onInit = function() { 
     this.parent.myFoo(items_list); 
    } 

    var $ctrl = this; 
    $ctrl.$routerOnActivate = function() {}; 
    $ctrl.selectedItems = []; 
} 

が がにテンプレートを変更してみてください答える--old： は、次にinit関数であなたが電話をかけることができますコントローラー機能