2016-01-19 34 views
5

レンダリングされた各アイテムのネストされたディレクティブ(分岐)を含むディレクティブツリービューがあります。隔離されたスコープを持つネストされたディレクティブのオブジェクトを角の親コントローラスコープに渡す方法

両方のディレクティブの範囲で、私は親コントローラと話すべき2つのパラメータを宣言しました。

filter: '&' //ネストされたディレクティブ(ブランチ)内のメソッドフィルタを、コントローラにバインドするhtmlディレクティブにバインドされているツリーディレクティブ属性のメソッドdoSomething()にバインドします。

iobj: '='は、スコープ付きオブジェクトをコントローラに渡すべき双方向バインディングパラメータです。 (が、現在ではありません)

指令:

app.directive('tree', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      t: '=src', 
      filter: '&', 
      iobj: '=' 
     }, 
     controller: 'treeController', 
     template: '<ul><branch ng-repeat="c in t.children" iobj="object" src="c" filter="doSomething()"></branch></ul>' 
    }; 
}); 

app.directive('branch', function($compile) { 

    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      b: '=src', 
      filter: '&', 
      iobj: '=' 
     }, 

     template: '<li><input type="checkbox" ng-click="innerCall()" ng-hide="visible" /><a>{{ b.name }}</a></li>', 
     link: function (scope, element, attrs) { 
      var has_children = angular.isArray(scope.b.children); 
      scope.visible = has_children; 
      if (has_children) { 
       element.append('<tree src="b"></tree>'); 
       $compile(element.contents())(scope); 
      } 
      element.on('click', function(event) { 
       event.stopPropagation(); 
       if (has_children) { 
        element.toggleClass('collapsed'); 
       } 
      }); 
      scope.innerCall = function() { 
       scope.iobj = scope.b; 

       console.log(scope.iobj); 
       scope.filter(); 
      } 
     } 
    }; 
}); 

HTML:

<div ng-controller="treeController"> 
    <tree src="myList" iobj="object" filter="doSomething()"></tree> 

    <a ng-click="clicked()"> link</a> 
</div> 

コントローラー:

app.controller("treeController", ['$scope', function($scope) { 
    var vm = this; 

    $scope.object = {}; 
    $scope.doSomething = function() { 
     var item = $scope.object; 
     //alert('call from directive'); 
     console.log(item); 
    } 

    $scope.clicked = function() { 
     alert('clicked'); 
    } 
... 

は現在、私はディレクティブから機能$scope.doSomethingを呼び出すことができますコントローラに送信します。だから、私は指令からコントローラのスコープにアクセスできることを知っています。私が理解できないことは、オブジェクトを指示子からコントローラに戻すパラメータとして渡す方法です。このコードを実行すると、$scope.object は常に空のオブジェクトになります。

私はこのことについてどのように助けてもらえますか。

答えて

2

&パラメータバインディングをサポートしています。ディレクティブにバインドされた表現であなたの例を考えると

scope.filter({message: 'Hello', anotherMessage: 'Good'}) 

messageanotherMessageなるローカル変数:

<tree src="myList" iobj="object" filter="doSomething(anotherMessage, message)"></tree> 

はここでコールバックパラメータは、テンプレート内で設定されているサンプルplunkerです。

documentationがはっきりと述べている:

は、多くの場合、これは ローカル変数の名前と値のマップを渡すことによって行うことができ、親スコープに 発現によって分離された範囲からのデータを渡すことが望ましいです式ラッパーfnに挿入します。 の例では、式がincrement(amount)である場合、localFnlocalFn({amount: 22})と呼ぶことによって、数値の値を と指定できます。

関連する問題