AngularJS 1.5.5 指令:$element.find() / $element.children() 并不总

Question

这是我创建的示例指令，以帮助理解标题中描述的问题：

define(['angular'], function(angular) {
  'use strict';
  var randomElement = angular.module('RandomElement', []);
  randomElement.directive('randomElement', function() { return {
    restrict: 'E',
    transclude: false,
    template: '<div><span class="random-span"></span></div>',
    controller: function($scope, $element) {
      // This method is triggered in a ng-click binding
      $scope.findSpan = function() {
        // About 20-30% of page reloads, this returns 0 results
        console.log($element.find('.random-span'));
      }
    }
  }});
  return randomElement;
});

请注意$scope.findSpan方法。这就是我遇到的问题：大约 20-30% 的页面重新加载，$element.find()（或$element.children()）返回 0 个结果。

我遇到的问题是否有已知原因？是否有一个可靠的解决方案可以将对模板中定义的子元素的引用传递给范围？

Answer 1

原因是

加载jqLite和jQuery之间的竞争条件。如果jQuery加载速度足够快，则使用jQuery而不是jqLite，并且该语句起作用。只有 jqLite，语句失败了。

对于 RequireJS，解决方案是将jQuery添加为入口文件中的Angular依赖项。