レンダリングされた各アイテムのネストされたディレクティブ(分岐)を含むディレクティブツリービューがあります。隔離されたスコープを持つネストされたディレクティブのオブジェクトを角の親コントローラスコープに渡す方法
両方のディレクティブの範囲で、私は親コントローラと話すべき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
は常に空のオブジェクトになります。
私はこのことについてどのように助けてもらえますか。