在不使用 ng-transclude 的情况下调用 transcluded 指令的链接函数答案

【问题标题】：Call the link function of transcluded directive without ng-transclude在不使用 ng-transclude 的情况下调用 transcluded 指令的链接函数
【发布时间】：2014-08-12 06:30:06
【问题描述】：

在指令上使用嵌入以及模板中的 ng-transclude 将调用可能的嵌套指令的链接函数。例如。将 item2 指令嵌套到 item1 (See Plunkr)：

  <item1>
    <item2>some text 1</item2>
    <item2>some text 2</item2>
    <item2>some text 3</item2>
  </item1>

将两个指令定义为

angular.module('someApp', [])

.directive('item1', function() {
    var linkFn = function(scope, element, attrs, nullCtrl, transcludeFn) {
      console.log('item1- linkFn');
    };

    var controllerFn = function($scope, $element, $attrs) {
        console.log('item1 - controllerFn');
        $scope.itemTab = [];
        this.addItem = function(item) {
            $scope.itemTab.push(item);
            console.log(item);
        };
    };

    return {
        restrict: 'E',
        transclude: true,
        controller: controllerFn,
        link: linkFn,
        template: '<li ng-repeat="item in itemTab">{{item.text}}</li><p ng-transclude></p>'
    };
})

.directive('item2', function() {
    var linkFn = function(scope, element, attrs, item1Ctrl) {
        console.log('item2 - linkFn');
        item1Ctrl.addItem({ text: element.text() });
    };

    return {
        restrict: 'E',
        require: '^item1',
        link: linkFn
    };
});

我们有以下输出

item1 - controllerFn
item2 - linkFn
Object {text: "some text 1"}
item2 - linkFn
Object {text: "some text 2"}
item2 - linkFn
Object {text: "some text 3"}
item1- linkFn

因为<p ng-transclude></p>。由于我使用<li ng-repeat="item in itemTab">{{item.text}}</li> 以某种方式手动显示嵌套 item2 指令的内容，我不想使用 ng-transclude。

如果我只从模板中删除<p ng-transclude></p>

template: '<li ng-repeat="item in itemTab">{{item.text}}</li>'

..，嵌套的 item2 指令链接函数不再被调用，输出为

item1 - controllerFn
item1- linkFn

如何在没有ng-transclude的情况下调用transcluded指令的链接函数？

【问题讨论】：

我很困惑，这意味着更难帮助。试着解释你想要的输出是什么，也许一个工作的 plunker 或 jsFiddle 会是最好的，而不是像（见 plunkr）那样的模型。
jsfiddle.net/HB7LU/8996 我不想显示红色文本。显示它是因为 ng-transclude，我需要使用它来执行 item2 链接功能。我当然可以在上面写 ng-show="false"，但是有没有更好的解决方案？
how to obtain $attr manually in angular的可能重复

标签： angularjs angularjs-directive

【解决方案1】：

您的指令的问题是 item1 是

    template: '<li ng-repeat="item in itemTab">{{item.text}}</li>'

将替换子节点。（因为没有tansclusion）所以你的孩子指令item2

     `<item2>some text 3</item2>`

不会被角度解析。所以 item2 指令没有被解析。

您的 plunker 代码中还有一件事，请在标记正文中添加 ng-app。

【讨论】：