javascript - AngularJS 等待标签加载到 DOM 中

Question

我正在通过 Angular Directive(指令)将谷歌图表添加到页面中，并且我想向其加载后创建的元素添加一个属性。在尝试添加属性之前确保元素存在的最佳方法是什么？

环顾四周，我的指令似乎应该起作用，但不起作用:

.directive('vdfWidgetGoogleChart', ['$timeout', function ($timeout) {
return {
 restrict: 'E',
  //replace: true,
  templateUrl: 'widgetgooglechart.html',
  link: function ($scope, elem, attrs) {
      function addTabIndex () {
        elem.find('svg').attr({tabindex: -1});
      }
      $timeout(addTabIndex);
  },
  scope: {
    chartObject: '='
  }
}

Answer 1

就个人而言，在制作图表时，最简单的事情是将属性附加到 SVG 元素，然后您就变得非常有棱 Angular ，因为您不是在寻找元素。

另一个选项是创建一个 Controller ，然后为需要该 Controller 的元素 SVG 创建指令。然后，当您将 SVG 作为该指令的子指令时，您的 svg 指令应该被调用。 (这是猜测，我没有尝试过)

<div controller-directive=".."><svg></svg></div>

然后，当 Controller 作为父级存在时，您的代码将具有 SVG。

或者您可以简单地调整代码，每隔 100 毫秒左右查找一次 svg，直到找到为止。

function addTabIndex () {
    var svg = elem.find('svg');

    if (svg.length != 0)
        svg.attr({tabindex: -1});
    else
        $timeout(addTabIndex, 100);
}

$timeout(addTabIndex);