Question

在指令中使用转换以及在其模板中使用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指令的链接功能？

Answer 1

您的指令存在的问题是 item1

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

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

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

不会被角度解析。因此不解析 item2 指令。

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

在没有ng-transclude的情况下调用transcluded指令的链接功能

1 个答案: