AngularJS将指令模板中的参数传递给控制器

在我的应用程序中,我有这样的指令：

.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对象还有一个来自父作用域的新作用域.