1

我有一个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，但我的印象是compile 会将immediately值传递给嵌套指令并完成它。

那么，什么时候编译呢？

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

4

2 回答 2

2

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

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

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

笨拙

于 2014-05-15T13:38:32.887 回答
1

请在下面找到更新代码。而不是在范围内创建重复变量下面是解决方案。我为此创建了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-09T10:54:18.450 回答