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

Question

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

.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>

在控制器中:

$scope.editArticle = function(vArticle) {}

当我只有一个指令 - 一切都很清楚,但是当我的指令调用另一个指令时如何传递参数？这是真的吗？如何？

Answer 1

您只需要更改一小段代码即可使函数调用正确接收参数

在您的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>

并在您的节点指令中，像这样调用您的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”从孙级传递给子级。

调用编译时也不需要创建新的作用域。您拥有的 $scope 对象也是来自父作用域的新作用域。