动态添加元素后更新指令

Question

我想做的事：

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

问题：

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

例如：

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

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

---

以下是相关代码：

Angular 指令：（下面的 scp.pieces[] 中的每个元素都有一个指令）

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

角度控制器：

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) 当函数返回一个字符串时，它什么也不做。 return scp.pieces[randPiece];

2) 你必须将字符串编译成一个元素并附加它。

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

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

更新：

基于 cmets，问题在于能够从数组中绑定到 DOM 中已编译的“指令元素”，并在不附加和消化新范围的情况下更新页面，就像我们直接从 HTML 字符串调用控制器一样。

我认为这是不可能的，直接。你最好有一个带有游戏部件控制器名称的字符串数组。

然后在您的 ng-repeat 中，根据该字符串手动绑定控制器。

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

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

这样您可以获得实时数据绑定，并且您跳过指令部分并手动将一些控制器功能塞入元素中。