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

Question

我正在通过 angular 指令将 google 图表添加到页面中，我想在它加载后创建的元素中添加一个属性。在尝试添加属性之前确保元素存在的最佳方法是什么？

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

.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);