在我的应用程序中,我有这样的指令:
.directive('nodeList', function($compile) {
return {
restrict: 'E',
terminal: true,
scope: {
nodes: '=ngModel',
deleteArticle: '&',
editArticle: '&'
},
link: function ($scope, $element, $attrs) {
if (angular.isArray($scope.nodes)) {
$element.append('<accordion close-others="true"><node ng-repeat="item in nodes" ng-model="item" delete-article="deleteArticle(node_item)" edit-article="editArticle(node_item)"></node></accordion>');
}
$compile($element.contents())($scope.$new());
}
};
})
.directive('node', function($compile) {
return {
restrict: 'E',
terminal: true,
scope: {
node: '=ngModel',
deleteArticle: '&',
editArticle: '&'
},
link: function ($scope, $element, $attrs) {
if (angular.isArray($scope.node.Options) && $scope.node.Options.length > 0) {
$element.append('<accordion-group><accordion-heading>{{node.Title}} <a href=\"javascript:void(0)\" ng-click=\"editArticle({node_item: node})\" data-toggle=\"modal\" data-target=\"#new-article\" class=\"action\"><i class=\"glyphicon glyphicon-edit\"></i></a></accordion-heading><node-list ng-model="node.Options"></node-list>{{node.Content}}</accordion-group>');
} else {
$element.append('<accordion-group><accordion-heading>{{node.Title}} <a href=\"javascript:void(0)\" ng-click=\"editArticle({node_item: node})\" data-toggle=\"modal\" data-target=\"#new-article\" class=\"action\"><i class=\"glyphicon glyphicon-edit\"></i></a></accordion-heading>{{node.Content}}</accordion-group>');
}
$compile($element.contents())($scope.$new());
}
};
})
和这样的html:
<node-list ng-model="articles" delete-article="deleteArticle(node_item)" edit-article="editArticle(node_item)"></node-list>
并在 Controller 中:
$scope.editArticle = function(vArticle) {}
当我只有一个指令时 - 一切都很清楚,但是当我的指令调用另一个指令时如何传递参数?这是真的吗?如何?
最佳答案
您只需要更改一小段代码即可让您的函数调用正确接收参数
在您的 节点列表指令,请调用您的 节点像这样:
<node ng-repeat="item in nodes" ng-model="item" delete-article="deleteArticle({node_item: node_item})" edit-article="editArticle({node_item: node_item})"></node>
并在您的 节点指令,请调用您的 节点列表像这样:
<node-list ng-model="node.Options" delete-article="deleteArticle({node_item: node_item})" edit-article="editArticle({node_item: node_item})"></node-list>
所以引用“node_item”在 child 的 child 的 child 之间正确传递......到最顶层的 parent (你的 Controller :)
看看这个:Plunker
原因:
您的 <节点列表> 有自己的作用域,你需要将“node_item”传递给父作用域(你的 Controller ),简单!棘手的部分是该函数是在孙子作用域(
你也不要调用 compile 时需要创建一个新的作用域。您在那里拥有的 $scope 对象还有一个 新品 来自父作用域的作用域。
关于AngularJS 将指令模板中的参数传递给 Controller ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26751985/