与定制指令结合使用

前端之家收集整理的这篇文章主要介绍了与定制指令结合使用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
使用ng-repeat指令与我自己的自定义指令相结合,我遇到了一个问题。

HTML:

<div ng-app="myApp">
  <x-template-field x-ng-repeat="field in ['title','body']" />
</div>

JS:

angular.module('myApp',[])
    .directive('templateField',function () {
        return {
            restrict: 'E',compile: function(element,attrs,transcludeFn) {
                element.replaceWith('<input type="text" />');
            }
        };
    });

看到这个JS小提琴:http://jsfiddle.net/GDfxd/

这里的问题是没有任何替代。我想要完成的是2x输入字段的输出,“x-template-field”标签在DOM中完全替换。我的怀疑是,由于ng-repeat在同一时间修改DOM,所以这不会奏效。

根据this堆栈溢出问题,接受的答案似乎表明这实际上在早期版本的AngularJS(?)中有效。

element.html(‘…’)不会工作吗?

虽然element.html(‘…’)实际上将生成的HTML注入到目标元素中,但我不希望HTML作为模板标签的子元素,而是在DOM中完全替换它。

为什么不用包含ng-repeat指令的另一个标签包装我的模板标签

基于与上述相同的原因,我不希望生成的HTML作为重复标签的子元素。虽然它可能在我的应用程序中正式工作,但我仍然觉得我已经调整了我的标记,以适应Angular,而不是相反。

为什么我不使用“模板”属性

我没有找到任何方法来更改从“template”/“templateUrl”属性中检索的HTML。我想注入的HTML不是静态的,它是从外部数据动态生成的。

我也很挑剔我的标记吗?

大概。

猜你在找的Angularjs相关文章