ng-repeat 中的 AngularJS 动态指令 [英] AngularJS Dynamic Directives inside ng-repeat

问题描述

我正在尝试在 ng-repeat 中动态创建指令.我有一个 directive-writer 可以创建许多其他指令，但 directive-writer 似乎没有输出指令属性.所以第二组指令永远不会被渲染.

查看这个Plunker以获得完整的演示.

简而言之，我有这个指令标签:

<div ng-repeat="dir in directives" 指令编写器指令文本="{{ dir.text }}" 指令类型="{{ dir.directive }}"></div>

范围数据:

$scope.directives = [{ 指令:'一个'，文本:'我是一个'}，{ 指令:'二'，文本:'我是二'}，{ 指令:'三'，文本:'我是三'}];

指令定义:

.directive('directiveWriter', function() {返回 {限制:'A'，编译:函数(tElement，tAttrs){tElement.html('<div say="' + tAttrs.directiveText + '" '+ tAttrs.directiveType + '>'+ tAttrs.directiveType + '

');}};

还有 3 个指令都是这样的:

.directive('one', function() {返回 {限制:'A'，替换:真的，模板:'<h3 class="one"></h3>',编译:函数(tElement，tAttrs){tElement.text('有人说，' + tAttrs.say);}};

问题是 directiveWriter 不会将 tAttrs.directiveType 值作为属性写出，仅作为文本...

所以渲染的 HTML 是:

<div say="I am One" {{ dir.directive }} class="ng-binding">one</div>

三"在 div 中作为文本呈现没有问题，但永远不会作为属性呈现.

我不明白:

• 为什么文本three"可以作为文本绑定在 div 内，但不能作为属性绑定.
• 为什么将类设置为ng-binding".

解决方案

问题之一是将属性解析为 html 的顺序.它们在周期的早期范围内可用 以下是您可以使用的一种方法:

HTML:

指令:

angular.module('app').directive('directiveWriter', function($compile) {返回 {限制:'A'，范围:{指令类型:'='，指令文本:'='},链接:功能(范围，元素，属性){var template='<div say="' + scope.directiveText + '" ' + scope.directiveType + '>'+ scope.directiveType + '

';模板= $编译(模板)(范围)；elem.replaceWith(模板);}};});

演示

I'm trying to create directives dynamically inside an ng-repeat. I have a directive-writer that creates a number of other directives but the directive-writer doesn't seem to output the directive attributes. So the second set of directives are never rendered.

See this Plunker for a full demo.

In short I have this directive tag:

<div ng-repeat="dir in directives" directive-writer 
     directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"></div>

Scope data:

$scope.directives = [
    { directive: 'one', text: 'I am One' },
    { directive: 'two', text: 'I am Two' },
    { directive: 'three', text: 'I am Three' }
];

Directive definition:

.directive('directiveWriter', function() {
    return {
        restrict: 'A',
        compile: function(tElement, tAttrs) {

            tElement.html('<div say="' + tAttrs.directiveText + '" '
                 + tAttrs.directiveType + '>' + tAttrs.directiveType + '</div>');
        }
    };

And 3 more directives all like this one:

.directive('one', function() {
    return {
        restrict: 'A',
        replace: true,
        template: '<h3 class="one"></h3>',
        compile: function(tElement, tAttrs) {
            tElement.text('One says, ' + tAttrs.say);
        }
    };

The problem is the directiveWriter doesn't write out the tAttrs.directiveType value as an attribute only as text...

So the rendered HTML is:

<div say="I am One" {{ dir.directive }} class="ng-binding">one</div>

Where "three" is rendered inside the div as text no problem but is never rendered as an attribute.

I don't understand:

• Why the text "three" can be bound inside the div as text but not as an attribute.
• Why the class is set to "ng-binding".

解决方案

One of the issues is order that attributes get resolved into html. They are available in scope earlier in the cycle Here's one way you can do it:

HTML:

<div directive-writer directive-text="dir.text" directive-type="dir.directive"></div>

Directive:

angular.module('app').directive('directiveWriter', function($compile) {
    return {
        restrict: 'A',
        scope:{
          directiveType:'=',
          directiveText:'='
        },
        link:function(scope,elem, attrs){
          var template='<div say="' + scope.directiveText + '" ' + scope.directiveType + '>' + scope.directiveType + '</div>';
          template= $compile(template)(scope);
          elem.replaceWith(template);
        }
    };
});

DEMO

这篇关于ng-repeat 中的 AngularJS 动态指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！