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', 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());
        }
    };
})

---

当我只有一个指令时—所有都是清楚的，但是当我的指令调用另一个指令时，如何传递参数呢？是真的吗？以及如何传递？

您可以使用服务传递您使用的任何参数 创建指令时，需要添加触发器以获取信息 此触发器应从服务获取信息并使用它 如果它被创建并获得一个未定义的参数，它将是第一个指令

---

我没有可用的代码，但这个概念会起作用。

您可以使用控制器并通过明确此依赖关系在指令之间进行通信。一个简单的例子：

var myApp = angular.module('myApp', [])
  .directive('foo', function () {
    return {
      restrict: 'E',
      controller: function ($scope) {
        this.property = 'something';
      },
      link: function (scope, element) {
      }
    };
  })
  .directive('bar', function() {
    return {
      require: '^foo',
      link: function (scope, element, attrs, fooCtrl) {
          console.log(fooCtrl.property);
        scope.value = fooCtrl.property;
      }
    }
  })

这里，指令

bar

将对指令

foo

的依赖项声明为封闭指令。因此，当链接函数被传递一个附加参数时，指令可以进行通信。因此，剪下的HTML将显示

某些内容

：

<div ng-app="myApp">
    <foo><bar>{{ value }}</bar></foo>
</div>

{{value}}

---

你可以

节点列表指令

从nodeList指令中公开控制器API，子节点指令可以调用该API来删除或编辑文章

controller: function ($scope) {
    this.deleteArticle = function (node) {
        var index = $scope.nodes.indexOf(node);
        if (index >= 0) {
            $scope.nodes.splice(index, 1);
            $scope.$emit('articleDeleted', node);
        }

    }
    this.editArticle = function (node) {
        var index = $scope.nodes.indexOf(node);
        if (index >= 0) {
            $scope.$emit('articleEdited', node);
        }

    }
}

节点指令

在node指令中，手动编译nodeList指令以避免递归，并添加链接以调用nodeList控制器的API：

link: function ($scope, $element, $attrs, nodeListController) {
    var template = angular.element('<node-list ng-model="node.nodes" ng-hide="node.hidden"></node-list>');
     $element.append(template);
     $compile(template)($scope);

      $scope.delete = function (node) {
          nodeListController.deleteArticle(node);
      }

      $scope.edit = function (node) {
          nodeListController.editArticle(node);
      }
}

var-app=angular.module（'app'，[]）；
var ctrl=app.controller（'ctrl'，函数（$scope，$rootScope）{
$scope.nodes=[{
标题：“标题1”，
节点：[{
标题：“标题1.1”，
节点：[]
}, {
标题：“标题1.2”，
节点：[]
}]
}, {
标题：“标题2”，
节点：[{
标题：“标题2.1”，
节点：[{
标题：“标题2.1.1”，
节点：[]
}, {
标题：“标题2.1.2”，
节点：[]
}]
}, {
标题：“标题2.2”，
节点：[{
标题：“标题2.2.1”，
节点：[]
}, {
标题：“标题2.2.2”，
节点：[]
}, {
标题：“标题2.2.3”，
节点：[]
}, {
标题：“标题2.2.4”，
节点：[]
}]
}]
}];
$scope.$on（'articledited'，函数（evt，节点）{
警报（“已编辑”+节点标题）；
});
$scope.$on（'articleDeleted'，函数（evt，节点）{
警报（“已删除”+节点标题）；
});
});
app.directive（'nodeList'，function（$parse）{
返回{
限制：'E'，
范围：{
节点：'=ngModel'
},
模板：“”，
控制器：功能（$scope）{
this.deleteArticle=函数（节点）{
var index=$scope.nodes.indexOf（节点）；
如果（索引>=0）{
$scope.nodes.splice（索引，1）；
$scope.$emit（'articledelected'，node）；
}
}
this.editArticle=函数（节点）{
var index=$scope.nodes.indexOf（节点）；
如果（索引>=0）{
$scope.$emit（'articledited'，节点）；
}
}
},
链接：函数（$scope，$element，$attrs）{}
};
});
应用程序指令（'node'，函数（$compile）{
返回{
限制：'E'，
要求：“^nodeList”，
范围：{
节点：'=ngModel'
},
控制器：功能（$scope）{
},
模板：“{node.Title}}”，
链接：函数（$scope、$element、$attrs、nodeListController）{
变量模板=角度元素（“”）；
$element.append（模板）；
$compile（模板）（$scope）；
$scope.delete=函数（节点）{
nodeListController.deleteArticle（节点）；
}
$scope.edit=函数（节点）{
nodeListController.editArticle（节点）；
}
}
};
});
div{
左边距：20px；
}
为了让函数调用正确地接收参数，您只需要更改一小段代码

在节点列表指令中，按如下方式调用节点：

<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 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”在子节点的子节点之间正确传递。。。到最顶层的父级（您的控制器：）

看看这个：

原因是:

您的有自己的作用域，您需要将“节点\u项”传递给父作用域（您的控制器），很简单！棘手的部分是函数是在孙子作用域（即）内调用的，因此您需要再次将“node\u item”从孙子传递给子节点

调用compile时，您也不需要创建新的作用域。您拥有的$scope对象还有一个来自父作用域的新的作用域。
如果您为我们创建JSFIDLE或plnkr，将更容易帮助您（并获得赏金），please@Cherniv嗯，我不知道如何添加ui引导。。。编译DOM时，为什么需要$scope.$new（）在隔离作用域内？@pankajparkar要呈现ChildStack的childs看看我的示例，我不知道如何在那里实现它，我需要将当前单击的注释中的数据传递给控制器，但这不在指令中
<node-list ng-model="node.Options" delete-article="deleteArticle({node_item: node_item})" edit-article="editArticle({node_item: node_item})"></node-list>