从angularjs中的另一个指令中添加指令

从另一个指令中添加指令会使浏览器挂起.

我想做的是

1)在编译函数内改变自定义元素指令(如< h7>< / h7>).通过这样做,浏览器挂起.

码:

<h7>TEST</h7>
    animateAppModule.directive('h7',function($compile){
        return {
            restrict:"E",compile:function(tElement,tAttrs,transclude){                
                tElement[0].setAttribute("ng-class","{selected:istrue}");
                return function(scope,iElement,iAttrs){
                    //$compile(iElement)(scope);
                }
            }
        }
    })

如果我取消注释// $compile(iElement)(scope);这行,浏览器挂起.
你可以在这个小提琴http://jsfiddle.net/NzgZz/3/中取消注释上面说的那行,看看浏览器是否挂起.

但是,如果我在h7指令中有模板属性,则浏览器挂起不会发生,如此小提琴所示. http://jsfiddle.net/KaGRt/1/.

总的来说,我想要实现的是

我想在模板指令的帮助下,使用新的功能修改模板.像装饰图案一样的东西.
我在指令链的指令的编译函数中执行此操作,以便它影响该模板的所有实例.

我想要实现的一个例子.

<xmastree addBaloon addSanta></xmastree>

1)假设xmastree有一个模板 – < div class =“xmastree”ng-class = {blinks:isBlinking}>< / div>

2)假设addBaloon有一个模板< div class =“ballon”ng-class = {inflated:isinflated}>< / div>
然后,addBaloon编译函数应该将模板从step1扩充到类似的东西

<div class="xmastree" ng-class={blinks:isBlinking}>
    <div ng-repeat = "ballon in ballons">
        <div class="ballon" ng-class={inflated:isinflated}></div>
    </div>
</div>

3)假设addSanta有一个模板< div class =“santa”ng-class = {fat:isFat}>< / div>
然后,addSanta编译函数应该将模板从步骤2扩充到类似的东西

<div class="xmastree" ng-class={blinks:isBlinking}>
    <div ng-repeat = "ballon in ballons">
        <div class="ballon" ng-class={inflated:isinflated}></div>
    </div>
    <div ng-repeat = "santa in santas">
        <div class="santa" ng-class={fat:isFat}></div>
    </div>
</div>

在所有编译之后,如果我针对具有合适属性的作用域运行从step3派生的模板,我应该能够获得HTML.

在指令元素上调用$compile将导致同一指令再次运行,然后重复该过程 – 永远.在许多指令的角度源代码中,您可以看到它们处理这种情况,如下所示:$compile(element.contents())(scope);使用element.contents()而不仅仅是element().这意味着元素内部的所有内容都已编译,并且指令/数据绑定已注册,并且不会创建任何循环.

如果您确实需要$编译元素本身,请在编译之前完全替换原始元素或从中删除原始指令(删除属性,更改节点类型等).

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...