AngularJS 将指令模板中的参数传递给 Controller

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>

并在 Controller 中:

$scope.editArticle = function(vArticle) {}

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

Answer 1

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

在您的 节点列表指令，请调用您的 节点像这样:

<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 )，简单!棘手的部分是该函数是在孙子作用域( )内调用的，因此您再次需要将“node_item”从孙子作用域传递给子作用域。

你也 不要调用 compile 时需要创建一个新的作用域。您在那里拥有的 $scope 对象还有一个 新品 来自父作用域的作用域。