javascript - 动态添加元素后更新指令

Question

我想做的事情:

使用指令创建自定义元素，并能够在不同时间动态地将这些元素添加到 View 中。

问题:

当我将自定义元素动态添加到 View 中时，这些元素在 View 中显示为 html，但该指令不会像预期那样更新元素。

例如:

我们有一个自定义元素 -> <ell></ell> 。当我包括<ell></ell>时在原始 html 中，该指令按预期工作，并用 4 个 div 填充它，每个 div 都有一个“ block ”类。就像这样 -> <div class="block"></div> .

但是如果我设置 div 的 HTML -> <div id="level" ng-bind-html="piecesInPlay"></div>等于 Controller 内的字符串，并更新该字符串，该指令不会作用于 <ell></ell>标签。

<小时/>

相关代码如下:

Angular 指令:(下面的 scp.pieces[] 中的每个元素都有一个指令)

app.directive('sqr', function() {
  return {
    restrict: 'E',
    template: tetris.templateString,
    link: tetris.randColor
  };
});

Angular Controller :

app.controller('levelCtrl', ['$scope', function(scp) {
  scp.pieces = ['<ell></ell>', '<r-ell></r-ell>', '<sqr></sqr>', '<zee></zee>', '<r-zee></r-zee>', '<tee></tee>', '<line></line>'];
  scp.piecesInPlay = '<ell></ell>';
  
  scp.generateNewPiece = function() {
    var min = 0, max = 6;
    var randPiece = Math.floor(Math.random() * (max - min + 1)) + min;
    
    scp.piecesInPlay += scp.pieces[randPiece];
    return scp.pieces[randPiece];
  };
  
  // generates a random piece and adds it to the pieces in play
  scp.generateNewPiece();
}]);

HTML:

<div id="level" ng-controller="levelCtrl" ng-bind-html="piecesInPlay">
    
</div>

Answer 1

1) 虽然该函数返回一个字符串，但它不对其执行任何操作。 返回 scp.pieces[randPiece];

2) 您必须将字符串编译为元素并附加它。

     var newElement= $compile(template)($scope);
     $element.append( element );
     $scope.$digest();

您需要编译它以进行 Angular 识别以识别您插入其中的新指令，然后您必须进行消化，因为这将向下传播子作用域启动的命令。

更新:

根据评论，问题是能够从数组绑定(bind)到 DOM 中已编译的“指令元素”，并在不附加和消化新范围的情况下更新页面，就像我们直接从 HTML 字符串调用 Controller 一样。

我不认为这是可能的，直接的。您最好拥有一个包含游戏片段的 Controller 名称的字符串数组。

然后在 ng-repeat 中，根据该字符串手动绑定(bind) Controller 。

<div class="my-pieces" ng-repeat="controllerName in board.activeControllerStrings">

<div ng-controller="{{controllerName}}"></div>

通过这种方式，您可以获得实时数据绑定(bind)，并且可以跳过指令部分并手动将一些 Controller 功能塞入元素中。