Question

我尝试在<div>内创建ng-repeat，以便我可以在第三方库中添加内容。

尝试1：

<div ng-init="init()">
  <div ng-repeat="item in items">
    <div id="{{ item.id }}"></div>
  </div>
</div>

$scope.init = function() {
  for (var i in items) {
    var element = document.getElementById(items[i].id);
    generateInnerHtml(element);
  }
};

尝试2：

<div ng-init="init()">
  <div ng-repeat="item in items">
    <div id="{{ item.id }}" ng-init="addContent(item.id)"></div>
  </div>
</div>

$scope.addContent = function(id) {
  var element = document.getElementById(id);
  generateInnerHtml(element);
};

尝试3：

<div ng-init="init()">
  <div ng-repeat="item in items">
    <div id="{{ item.id }}" ng-init="addContent(this)"></div>
  </div>
</div>

$scope.addContent = function(element) {
  generateInnerHtml(element);
};

对于所有三次尝试，element始终为null或未定义。怎么了？

Answer 1

在尝试＃1和＃2时，您的函数在处理所有Angular指令之前运行，因此id的{{1}}尚未定义。

您可以将代码包装在div中以强制它等到DOM正确生成：

$timeout()

在此处查看演示：https://jsfiddle.net/1w5ntajm/。

Answer 2

正如已经指出的那样，在渲染完成之前，您的函数正在运行。但是，正如@tails所提到的那样，让DOM操纵处于指令中。这样，您就可以将它与控制器分离，并且可以轻松地重复使用它。

请参阅plunker

标记：

<div ng-repeat="item in items" data-generated="item"></div>

指令：

app.directive('generated', ['$compile', function($compile) {
  var generateInnerHtml = function(e) {
    e.innerHTML = '<pre>item = {{vm.item}}</pre>'
  };
  return {
    restrict: 'AE',
    scope: {
      item: '=generated'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: [function() {
    }],
    compile: function(element, attr) {
      generateInnerHtml(element[0]);
      return function(scope, element, attr) {
        // Only do this if you need access to scope variables
        $compile(element.contents())(scope);
      }
    }
  };
}]);

获取对ng-repeat

2 个答案: