Angular javascript: 无法访问 DOM 元素

Question

控制器代码：

$scope.items = [];
$scope.items = [{'name': 'name x', 'id': 'xyz'},
                                    {'name': 'name y', 'id': 'uqh'}];

console.log(document.getElementById('xyz')+'<--- Element is created');

查看

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

所以在这里，一旦我动态创建了 div，我想在每个 div 中绘制一个图表。但是我无法访问它。

控制台显示为空。我明白这里出了什么问题。但是有人可以建议我在这种情况下采取正确的方法吗？

我知道的另一种方法是像这样绑定函数调用，但它会被调用多次。所以我也不能那样继续。

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

Answer 1

好吧，我只是建议创建一个这样的指令：

<div ng-repeat="item in items">
  <div draw-my-chart="{{item.id}}"/>
</div>

然后在你的 js 中：

angular.directive('drawMyChart', function() {
  return {
    link: function(scope, element, attrs) {
      // access your element here ...
    }
  };
})

Angular javascript: 无法访问 DOM 元素

Angular javascript: unable to access DOM element

angularjs

angularjs-directive

angularjs-scope