1

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

有关完整演示，请参阅此 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>

其中“三”在 div 内呈现为文本没问题，但从不呈现为属性。

我不明白：

  • 为什么文本“三”可以作为文本绑定在 div 内，但不能作为属性。
  • 为什么类设置为“ng-binding”。
4

2 回答 2

4

问题之一是将属性解析为 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

于 2014-09-12T23:40:56.317 回答
0

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

看到这个 

  (http://plnkr.co/edit/2pUzPClubLLBlfap8fhk?p=preview)
于 2014-09-12T23:50:50.380 回答