从循环动态创建指令

我有一个main directive它有一个array它的范围包含数据构建其他directives应编译并附加到main directive。从循环动态创建指令

问题是，当我遍历该数组时，我只能从数组中的最后一个元素获取数据，因此我无法正确地为每个自定义指令绑定相应的数据。

主要指令：

angular.module('testApp') 
    .directive('mainDirective', ["$compile", function ($compile) { 

    return { 
     template: ' <div><p>Main Directive </p><div class="insertion-point"></div></div>', 

     link: function (scope, element, attributes, controller) { 

      var insertionPoint = element.find('.insertion-point'); 

      angular.forEach(scope.demoObj.panels, function (value, index) { 


       var directiveName = value.type; 

       scope.value = value; 
       var directiveString = "<div " + directiveName + " panel-data=value ></div>"; 

       var compiledElement = $compile(directiveString)(scope); 

       insertionPoint.append(compiledElement); 

     }); 
    } 


    } 


}]);

指令被嵌套：

angular.module('testApp') 
.directive('nestedDirective', [function() { 

    return { 

     scope:{ 
     panelData:'=' 
     }, 
     template:' <div><p>Nested Directive </p>{{panelData.data.test}}</div>' 
    } 
}]);

数据是这样的：

    $scope.demoObj = { 

       panels:[ 
       { 
        id:'unique_id_1', 
        type:'nested-directive', 
        data:{ 
         test:'test 1' 
        } 
       }, 
       { 
        id:'unique_id_2', 
        type:'nested-directive', 
        data:{ 
         test:'test 2' 
        } 
       }, 
       { 
        id:'unique_id_3', 
        type:'nested-directive', 
        data:{ 
         test:'test 3' 
        } 
       } 

      ] 
     }

至于我可以在站立，编译不会立即发生在forEach语句中，这就是为什么每个指令都从编号为unique_id_3（数组中最后一个元素）的对象获取数据的原因。而且所有的指令都有独立的范围。

编辑：据我所知，在的forEach我需要的价值增加的范围，所以我可以把它pass到嵌套指令隔离范围，我的理解是，当环完成scope.value将是循环的最后value，但我的印象是，编译将immediately将值传递给嵌套的指令并完成它。

那么，什么时候编译发生？

我该如何绕过这个限制？

来源

2014-05-15 Ivan V.

有一件事：jqLite'find'仅限于标记名称，所以你可能有一个问题与你的'插入点'。另外，数据对象中存在错误（例如缺少引号和不必要的分号）。伪代码中的拼写错误？或者他们在真实代码中也存在问题？ –

我有jQuery出现在页面上。将元素附加到'main directive'不是一个问题。 –

你可以请设置一个[Plunker]（http://plnkr.co/）来证明这个问题？我尽力为您服务，但您提供的代码存在太多问题。 –

的问题是compiledElement的链接步骤将在未来消化发生周期，在那个时候，scope.value是数据的最后一个值。

的解决办法是在范围创造不同的价值的属性，就像这样：

var directiveName = value.type; 
var valueProp = 'value' + index; 
scope[valueProp] = value; 
var directiveString = "<div " + directiveName + " panel-data=" + valueProp + "></div>";

plunk

来源

2014-05-15 13:38:32

请看以下更新代码。而不是在范围内创建重复变量下面是解决方案。我已经创建plunker相同

angular.module('testApp') 
.directive('mainDirective', ["$compile", function ($compile) { 

return { 
    template: ' <div><p>Main Directive </p><div class="insertion-point"></div></div>', 

    link: function (scope, element, attributes, controller) { 

     var insertionPoint = element.find('.insertion-point'); 

     angular.forEach(scope.demoObj.panels, function (value, index) { 

      var directiveName = value.type; 
      var directiveString = "<div " + directiveName + " panel-data=demoObj.panels["+ index+"]></div>"; 

      var compiledElement = $compile(directiveString)(scope); 

      insertionPoint.append(compiledElement); 
    }); 
} 
} 
}]);

来源

2015-03-09 10:54:18

从循环动态创建指令

回答

相关问题