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() 就此而言）return 0 个结果。

我遇到的问题是否有已知原因？是否有将模板中定义的 sub-element 的引用传递给范围的可靠解决方案？

Answer 1

原因是加载 jqLite 和 jQuery 之间存在竞争条件。如果 jQuery 加载速度足够快，则使用 jQuery 而不是 jqLite 并且该语句有效。仅使用 jqLite，语句失败。

RequireJS 的解决方案是在入口文件中添加 jQuery 作为 Angular 依赖项。

AngularJS 1.5.5 指令：$element.find() / $element.children() 并不总是有效

AngularJS 1.5.5 Directive: $element.find() / $element.children() does not always work

angularjs

angularjs-directive

angularjs-scope

angularjs-1.5