动态创建循环指令

Question

我有一个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中，我需要将值添加到作用域，这样我就可以将其添加到嵌套指令隔离作用域，并且我理解，当循环完成时，scope.value将是循环的最后一个value，但我的印象是，编译将把值传递给嵌套指令并完成它。

那么，什么时候开始编译呢？

我怎样才能绕过这个限制呢？

Answer 1

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

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

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

扑通

Answer 2

请查找下面的更新代码。解决方案不是在下面的作用域中创建重复变量。我创建了同样的柱塞

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);
    });
}
}
}]);