AngularJS将指令模板中的参数传递给控制器
发布时间:2020-12-17 07:12:01 所属栏目:安全 来源:网络整理
导读:在我的应用程序中,我有这样的指令: .directive('nodeList',function($compile) { return { restrict: 'E',terminal: true,scope: { nodes: '=ngModel',deleteArticle: '',editArticle: '' },link: function ($scope,$element,$attrs) { if (angular.isArray
在我的应用程序中,我有这样的指令:
.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',scope: { node: '=ngModel',$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> 在控制器中: $scope.editArticle = function(vArticle) {} 当我只有一个指令 – 一切都很清楚,但是当我的指令调用另一个指令时如何传递参数?这是真的吗?如何? 解决方法
您只需要更改一小段代码,以便函数调用正确接收参数
在你的nodeList指令中,调用你的节点,如下所示: <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指令中,调用您的nodeList,如下所示: <node-list ng-model="node.Options" delete-article="deleteArticle({node_item: node_item})" edit-article="editArticle({node_item: node_item})"></node-list> 所以引用“node_item”正在孩子的孩子的孩子之间正确传递到最顶级的父母(你的控制器:) 看看这个:Plunker 原因: 你的< node-list>有自己的范围,你需要将“node_item”传递给父范围(你的控制器),简单!棘手的部分是在孙子范围内调用该函数(< node>),因此您再次需要将“node_item”从孙子传递给子节点. 调用compile时也不需要创建新的作用域.您在那里的$scope对象还有一个来自父作用域的新作用域. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |