javascript - 控制 View 的元素数组 (AngularJS)

Question

我正在尝试做什么:

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

我希望能够拥有一个自定义元素数组，并且当我更新数组时，它会更新 View 。每次更新时，自定义元素的指令都需要 $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