イベント属性を持つ角度コンポーネント

Question

角度1のコンポーネントを作成しました。これはチェックボックスを表しています。私はチェックした後に（コントローラから）いくつかのアクションを呼び出すためのイベントを追加したいと思います。ここに私のコードは次のとおりです。コンポーネントにイベントを追加する方法<checkbox checkedEvent="{{controllerAction()}}"></checkbox>

：

threeListsApp.component("checkbox", 
{ 
    template: '<div ng-if="!checked" ng-click="check()" ng-model="checked"></div>' + 
     '<div ng-if="checked" ng-click="check()" ng- model="checked"><i class="fa fa-check"></i></div>', 
    controller: function checkBoxController($scope) { 
     $scope.checked = false; 
     $scope.check = function() { 
      $scope.checked = !$scope.checked; 
      if ($scope.checked) { 
       //CALL SOME ACTION 
      } 
     } 
    } 
}); 

私はこのようなものを使用したいのですが？アドバイスありがとう

Answer 1

私の解決策は、（私はディレクティブを使用）です：

threeListsApp.directive('checkbox', function ($rootScope) { 
    return { 
     restrict: 'E', 
     template: '<div><div ng-if="!checked" ng-click="check()" ng-model="checked"></div>' + 
     '<div ng-if="checked" ng-click="check()" ng- model="checked"><i class="fa fa-check"></i></div></div>', 
     replace: true, 

     link: function (scope, element, attrs, model) { 
      scope.checked = false; 

      scope.check = function() { 
       scope.checked = !scope.checked; 
       if (scope.checked) { 
        var id = attrs.checked.substring(attrs.checked.lastIndexOf("(") + 1, attrs.checked.lastIndexOf(")")); 
        var method = attrs.checked.substring(0, attrs.checked.lastIndexOf("(")); 
        $rootScope[method](id); 
       } 
      } 
     } 
    }; }); 

用途：

<checkbox checked="controllerMethod({{item.ID}})"></checkbox> 

Answer 2

私は質問を理解していないか分かりません。クリック時にイベントをトリガーする必要がある場合は、ng-click機能に$rootScope.$emitまたは$rootScope.$broadcastを追加するだけです。

イベントをリッスンする必要がある場合は、コントローラーにリスナー$scope.$onを使用できます。しかし、この場合は、コントローラーのハードコードリスナーの代わりにpub-subパターンを使用することが望ましいです。ここで

$rootScope documentation about events

Angular pubSub design advices

Answer 3

の代わりに、コントローラのメソッドを呼び出して、あなたが送りますイベントやコードのどこにでもこれを聞くイベント。あなたのディレクティブで

：

どこでもあなたのコントローラで

$scope.$emit('myCheckboxIsChecked') 

：

$scope.$on('myCheckboxIsChecked', function(){ 
    // in your controller, execute your code here 
}); 

もし何か問題があれば、あなたはそれがあまりきれいだが、それは動作しますが、代わりに$スコープの$ rootScopeを試すことができます。このページを確認してくださいhttps://docs.angularjs.org/api/ng/type/ $ rootScope.Scope