子ディレクティブのメソッドを呼び出す角度ディレクティブ

Question

ディレクティブ（<partition>）が子ディレクティブのコントローラ（<property-value>）でメソッドを呼び出せる、Angularで階層構造を実装する方法に関するアドバイスを探しています。

私はここで一緒に詳細な例を入れている：
https://jsfiddle.net/95kjjxkh/1/

あなたが見ることができるように、私のコードは、内の1つ以上の<property-value>ディレクティブを表示するアウターディレクティブ、<partition>が含まれています。

<property-value>ディレクティブは、編集方法editItem()を提供しています。これにより、ユーザは1つのエントリの値を変更できます。私の例を簡潔にするために、私は単純にここに乱数を割り当てますが、私のプロダクションアプリでは、新しい値をユーザに問い合わせるモーダルが表示されます）。

これは問題なく動作します。しかし、外部ディレクティブ<partition>では、新しい空白の<property-value>ディレクティブを作成し、直ちにその編集メソッドを呼び出して、ユーザーが初期値を入力できるようにしたいと考えています。初期値が入力されない場合、新しい項目は破棄されます。

私は内部ディレクティブの例を見てきましたが、ディレクティブを囲むことでメソッドを呼び出すことができましたが、それ以外の方法はありません。

これを行う方法はありますか？あるいは、このような視点を構築するためのより良い方法がありますか？

Answer 1

いつも$ broadcastを使って両方の方法で話すことができます。あなたのお母さんにもあなたの子供にも。あなたの子供のコントローラで

Answer 2

あなたはパーティションのコントローラでこの

link:function(scope,element,attrs,partitionCtrl){ 
    partitionCtrl.getChildCtrl(element) 
    } 

のような子ディレクティブのリンク機能で親コントローラを取得しますこれで、次の

app.directive('propertyValue', function() { 
return { 
    require : '^partition' 
    restrict: 'E', 
    scope: { 
     item: '=' 
    }, 

を行うことができますがgetChildCtrl機能としての作成しますそれは「プロパティ値」コントローラ機能を呼び出す。

controller: function ($scope, ItemFactory) { 
// your code 
var propValueCtrl =undefined; 
this.getChildCtrl =function(elem) 
{ 
    propValueCtrl = elem.controller(); 
} 
this.callChildFunction = function() 
{ 
    propValueCtrl.Edit();// whatever is the name of function 
} 

プロパティリンク関数で必要なときにこの関数を呼び出します。

これが役に立ちます。

Answer 3

あなたはそれがコントローラとディレクティブのこのコードを試し 行うために$rootScope.$broadcast();を使用することができます。

var app = angular.module('miniapp', []); 

app.directive("addCheckbox", function() { 
     return { 
      "restrict": "E", 
      "replace": true, 
      "scope": true, 
      "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>', 
      "link": function($scope, $elem, attrs) { 
        $elem.bind("click", function() { 
         $scope.checkboxChecked = !$scope.checkboxChecked; 
       }) 

     $scope.$on("changeCheckbox", function(event, args) { 
      $scope.checkboxChecked = !$scope.checkboxChecked; 
     }) 
     } 
    } 
}) 

app.controller("myController", function($scope, $rootScope) { 
    $scope.changeCheckbox = function() { 
     $scope.checkboxChecked = !$scope.checkboxChecked; 
     $rootScope.$broadcast('changeCheckbox', {}); 

    } 
}) 

Working Fiddle Demo