javascript - 类型错误 : Cannot read property 'bind' of undefined using ng-cropper directive

Question

我收到TypeError: Cannot read property 'bind' of undefined.当我尝试加载 ng-cropper 指令时，它是cropper javascript 图像裁剪库的 Angular 绑定(bind)。我不完全确定哪些代码可能与显示最相关，但这是指令的上半部分:

angular.module('ngCropper', ['ng'])
.directive('ngCropper', ['$q', '$parse', function($q, $parse) {
  return {
    restrict: 'A',
    scope: {
      options: '=ngCropperOptions',
      proxy: '=ngCropperProxy', // Optional.
      showEvent: '=ngCropperShow',
      hideEvent: '=ngCropperHide'
    },
    link: function(scope, element, atts) {
      var shown = false;

      scope.$on(scope.showEvent, function() {
        if (shown) return;
        shown = true;

        preprocess(scope.options, element[0])
          .then(function(options) {
            debugger;
            setProxy(element);
            element.cropper(options);
          })
      });

      function setProxy(element) {
        if (!scope.proxy) return;
        var setter = $parse(scope.proxy).assign;
        setter(scope.$parent, element.cropper.bind(element));
      }

setter(scope.$parent, element.cropper.bind(element)); 上引发错误setProxy() 中的行功能。

因为cropper显然元素变量上未定义。什么会导致这种情况呢？我不是 Angular Directive(指令)方面的专家，但我想如果标签是这样设置的，它应该可以很好地解决？

奇怪的是，它在演示应用程序中确实解析得很好，并且我的代码反射(reflect)了相同的设置!我唯一的猜测是我可能使用的另一个模块可能会产生干扰？我不愿意把它们全部拿出来，但可能归结为这一点。

我的模块声明为: angular.module('app', [ 'ui.router', 'ngMessages', 'ngSanitize', 'LocalStorageModule', 'angular.filter', 'flow', 'ng-sortable', 'focus-if', 'ngCropper', 'controllers', 'services', 'directives', 'filters'])

我引用了这个演示来了解我所做的 - https://github.com/koorgoo/ngCropper/tree/master/demo

我想，

1. “cropper”应在什么基础上解决？ (所以我知道要检查什么)
2. 您能发现我的代码有任何明显的问题吗？

Answer 1

在加载依赖项时，您需要保持精确的顺序，并且应先加载 jQuery，然后再加载 AngularJS 和其他内容，如示例 HTML here 中所示。 .

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/cropper/dist/cropper.js"></script>
<link href="../bower_components/cropper/dist/cropper.css" rel="stylesheet">
<script src="../ngCropper.js"></script>