Question

我想要做的是在我插入DOM之前手动处理transclude并修改内容：

return {
    restrict: 'E',
    transclude: true,
    template: '<HTML>',
    replace: true,
    link: function(scope, element, attrs, ngModelCtrl, $transclude) {

        var caption = element.find('.caption');

        $transclude(function(clone) {
            console.log(clone);
            clone.filter('li').addClass('ng-hide'); // this don't work
            clone.addClass('ng-hide'); // same this one
            clone.attr('ng-hide', 'true'); // same this one
            $compile(clone)(scope.$new()).appendTo(caption);
            caption.find('li').addClass('ng-hide'); // and this
        });
    }
}

在angular.js源代码中，我找到了这个例子：

  var templateElement = angular.element('<p>{{total}}</p>'),
      scope = ....;

  var clonedElement = $compile(templateElement)(scope, function(clonedElement, scope) {
    //attach the clone to DOM document at the right place
  });

  //now we have reference to the cloned DOM via `clonedElement`

但是当我在链接功能中添加clonedElement.appendTo(caption);时，它只会在内部使用ng-repeat添加注释。

我需要这个，因为在这种情况下我需要隐藏所有元素

<dropdown>
  <li ng-repeat="item in items"><a>{{item.label}}</a></li>
</dropdown>

我需要在扩展ng-repeat之后在编译或DOM之前修改模板。之前会更好，因为我可以使用ng-hide指令而不是ng-hide类添加逻辑。

Answer 1

jcubic。您不必使用$ compile来完成您要执行的操作。

您可以过滤转化后的元素＆＃39;克隆＆＃39;并将css类添加到已过滤的节点，但之后您必须将修改后的克隆附加到模板（它由链接函数的＆＃39;元素＆＃39;属性标识）。

element.append(clone)

我为你创建了这个jsfiddle。

如果您还有其他问题，请为您的案例创建一个jsfiddle。它会更好地回答Thx

Answer 2

我发现自问题发布以来已经很久了，但我希望你会发现以下内容很有用。

我在这个（翻译）业务中经历了相当长的时间，我尝试了几种方法来实现@jcubic所需要的东西，最后我遇到了一个非常强大且非常简单的解决方案。

git ls-files

因此，您可以看到您完全控制了＆＃34;被抄袭的＆＃34;内容，你甚至不需要翻译！： - ）

PS。我用Angular 1.4测试了它。不确定它是否适用于替换：true（我没有费心去测试它，因为如果它没有，它会有轻微的麻烦）。您可以像在编译函数中使用一样使用前后链接，并且需要将$ compile服务注入到您的指令中。

Answer 3

如果你正在使用angular＆gt; 1.3和ngTransclude in template，所以你不需要更新克隆，而是更换DOM，例如：

elm.find('ng-transclude')

http://jsfiddle.net/jhqkxgos/

但如果您更新了需要从控制器访问的内容

，请务必compile找到元素

如何在编译内部指令之前修改transcluded内容？

3 个答案: