Question

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

有关完整演示，请参阅this Plunker。

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

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

范围数据：

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

指令定义：

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

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

还有3个指令都像这样：

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

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

所以渲染的HTML是：

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

其中“three”在div中呈现为文本没有问题，但永远不会呈现为属性。

我不明白：

为什么文本“three”可以作为文本绑定在div中，但不能作为属性绑定。
为什么将课程设置为“ng-binding”。

Answer 1

其中一个问题是将属性解析为html的顺序。它们在周期的早期范围内可用。这是您可以做到的一种方式：

HTML：

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

指令：

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

Answer 2

我修改了你的例子。现在它有效。你应该使用$ compile。

见这个

  (http://plnkr.co/edit/2pUzPClubLLBlfap8fhk?p=preview)

ng-repeat中的AngularJS动态指令

2 个答案: