CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directive
GONeale
GONeale

Reputation: 26494

TypeError: Cannot read property 'bind' of undefined using ng-cropper directive

I'm receiving TypeError: Cannot read property 'bind' of undefined. When I attempt to load the ng-cropper directive, which is an angular binding for the cropper javascript image cropping library. I'm not entirely sure what code might be most relevant to show, but this is the top half of the directive:

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

The error is thrown on the setter(scope.$parent, element.cropper.bind(element)); line in the setProxy() function.

It's because cropper apparently is undefined on the element variable. What would cause this? I am not an expert in angular directives, but I would imagine it should resolve fine if the tag has been setup like this?

and the strange thing is, it does resolve fine in the demo application and my code reflects the same setup! My only guess is perhaps another module I may be using could be interfering? I'm reluctant to take them all out but it might come down to that.

My modules are declared as: angular.module('app', [ 'ui.router', 'ngMessages', 'ngSanitize', 'LocalStorageModule', 'angular.filter', 'flow', 'ng-sortable', 'focus-if', 'ngCropper', 'controllers', 'services', 'directives', 'filters'])

I referred to this demo to get as far as I did - https://github.com/koorgoo/ngCropper/tree/master/demo

I suppose,

  1. On what basis should 'cropper' resolve? (so I know what to check)
  2. Can you see any obvious issues with my code?

Upvotes: 0

Views: 4110

Answers (1)

Arkantos
Arkantos

Reputation: 6608

You need to maintain a precise order while loading your dependencies and jQuery should be loaded first before AngularJS and others as indicated in the sample 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>

Upvotes: 4

Related Questions