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依赖项。

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

1 个答案: