如何修改前内容transcluded里面编译指令? [英] How to modify transcluded content before compile inside directive?

查看:180
本文介绍了如何修改前内容transcluded里面编译指令?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要做的,是通过手工来处理transclude和修改内容之前,我插入DOM:

What I want to do, is to handle transclude by hand and modify the content before I insert into the DOM:

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源,我发现这个例子:

In angular.js source I found this example:

  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(标题); 链接功能里面只添加与NG-重复内注释

but when I add clonedElement.appendTo(caption); inside link function it only add comment with ng-repeat inside.

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

I need this because I need to hide all elements in this case

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

我需要之前修改模板编译或DOM NG-重复扩大后。以前会更好,因为我将能够使用NG-hide指令代替NG隐藏类添加逻辑。

I need to modify the template before compile or DOM after ng-repeat is expanded. Before would be better because I will be able to add logic using ng-hide directive instead of ng-hide class.

推荐答案

jcubic。您不必使用$编译你正在尝试做的。

jcubic. You do not have to use $compile for what you are trying to do.

您可以过滤transcluded元素克隆和CSS类添加到过滤节点,但在那之后,你必须修改后的克隆追加到模板(它是由链接功能的元素属性进行标识)。

You can filter the transcluded element 'clone' and add css classes to the filtered nodes , but after that you have to append the modified clone to the template (it is identified by the 'element' attribute of the link function).

element.append(clone)

我创造了这个的jsfiddle 你。

如果您还有其他疑问,请创建case.It的的jsfiddle将更好地做出回答THX

If you still have other questions , please create a jsfiddle of your case.It Will be better to make an answer Thx

这篇关于如何修改前内容transcluded里面编译指令?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆