控制视图的元素数组（AngularJS）

Question

我想要做什么：

有没有办法在 AngularJS 中使用元素数组来填充带有子元素的 div？

我希望能够拥有一个自定义元素数组，并且当我更新数组时，它会更新视图。每次我进行更新时，自定义元素的指令都需要$scope.$digest() 元素。

---

伪代码：

html

<div id="parent" ng-controller="parentCtrl" ng-bind-html="arrOfElems"></div>

Javascript

app.controller('levelCtrl', ['$scope', '$compile', '$element', function(scp, cmpl, elem) {
  scp.arrOfElems = ['<ell></ell>', '<r-ell></r-ell>', '<sqr></sqr>'];
}]);

app.directive('ell', function() {
  return {
    restrict: 'E',
    template: <div class="block"></div>
  };
});
app.directive('rEll', function() {
  return {
    restrict: 'E',
    template: <div class="block"></div>
  };
});
app.directive('sqr', function() {
  return {
    restrict: 'E',
    template: '<div class="block"></div>'
  };
});

理想情况下，生成的 html 将是：

<div id="parent" ng-controller="parentCtrl" ng-bind-html="arrOfElems">
  <ell>
    <div class="block"></div>
  </ell>
  <r-ell>
    <div class="block"></div>
  </r-ell>
  <sqr>
    <div class="block"></div>
  </sqr>
</div>

Answer 1

创建一个简单的加载指令来编译它们并插入它们

<div id="parent" ng-controller="parentCtrl" my-loader="arrOfElems"></div>

未经测试但应该可以工作：

app.directive('myLoader',function($compile){
   return function(scope, elem, attrs){
        var arrOfElems=scope[attrs.myLoader];
        angular.forEach( arrOfElems, function(newEl){
          elem.append( $compile(newEl)(scope) );
        });
   }
});

DEMO