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中我需要将值添加到作用域中，这样我就可以pass将它嵌入到嵌套指令的隔离范围中，并且我理解当循环结束时scope.value将是循环的最后value，但我认为编译将immediately将值传递给嵌套指令并完成它。

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

我如何规避这一限制？

Answer 1

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

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

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

plunk

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

从循环动态创建指令

2 个答案: