Question

我想做什么：

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

问题：

当我将自定义元素动态添加到视图中时，元素在视图中显示为html，但该指令不会更新它应该的元素。

For Instance：

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

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

以下是相关代码：

Angular Directives :(以下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();

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

<强>更新

根据评论，问题在于能够绑定到已编译的＆＃34;指令元素＆＃34;在数组的DOM 中，并且页面更新时不添加和消化新的作用域，就像我们直接从HTML字符串调用控制器一样。

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

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

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

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

通过这种方式，您可以获得实时数据绑定，并跳过指令部分并手动将某些控制器功能集中到元素中。

动态添加元素后更新指令

我想做什么：

问题：

For Instance：

1 个答案: