从循环动态创建指令答案

【问题标题】：Dynamically create directives from a loop从循环动态创建指令
【发布时间】：2014-07-03 05:54:53
【问题描述】：

我有一个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 语句中不会立即进行编译，这就是为什么每个指令都从 ID 为 unique_id_3（数组中的最后一个元素）的对象中获取数据的原因。此外，所有指令都有独立的范围。

编辑：我知道在 forEach 中我需要将值添加到范围，以便我可以 pass 将其添加到嵌套指令隔离范围，并且我知道当循环完成时 scope.value 将是最后一个 @987654335 @ 的循环，但我的印象是编译将 immediately 将值传递给嵌套指令并完成它。

那么，什么时候编译呢？

如何规避此限制？

【问题讨论】：

一件事：jqLite find 仅限于标签名称，因此您的insertionPoint 可能有问题。此外，您的数据对象中存在错误（例如，缺少引号和不必要的分号）。是伪代码中的错别字吗？还是它们在您的真实代码中也存在问题？
我的页面上有 jQuery。将元素附加到 main directive 不是问题。
您能否设置一个Plunker 来演示该问题？我尝试为您解决，但您提供的代码存在太多问题。
@MarcKline 我创建了plunker 并更新了问题以反映这一点。
我认为您的问题可能已经根据您对问题代码和 Plunker 所做的更改而发生了变化，但无论如何，@YeLiu 似乎提供了一个可行的解决方案

标签： angularjs angularjs-directive angularjs-scope angularjs-compile

【解决方案1】：

问题是compiledElement的链接步骤将发生在下一个摘要循环中，此时scope.value是数据的最后一个值。

解决方案是在作用域上创建不同的值属性，如下所示：

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

plunk

【讨论】：

【解决方案2】：

请在下面找到更新代码。而不是在范围内创建重复变量下面是解决方案。我为同样的创建了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);
    });
}
}
}]);

【讨论】：