ngImgCrop Dependency Injection not working properly in AngularJs

问题

I am using ng-img-crop in angular. After installing it by "bower install --save ngImgCrop" and injecting the dependency when I run it by grunt command, I got an error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module ngImgCrop due to:
Error: [$injector:nomod] Module 'ngImgCrop' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second  argument.

I followed through the steps mentioned at https://www.npmjs.com/package/ng-img-crop the code is as follows:

home.client.view.html:

<script src="public\lib\ngImgCrop\source\js\ng-img-crop.js"></script>
<link rel="stylesheet" type="text/css" href="public\lib\ngImgCrop\source\scss\ng-img-crop.css"> 
<style>
.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  width:500px;
  height:350px;
}
</style>
<body ng-app="core" ng-controller="Ctrl">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
  <img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img src="myCroppedImage" /></div>
</body>

home.client.controller.js

 angular.module('core', ['ngImgCrop'])
 .controller('Ctrl', function($scope) {
    $scope.myImage='';
    $scope.myCroppedImage='';

  var handleFileSelect=function(evt) {
  var file=evt.currentTarget.files[0];
  var reader = new FileReader();
  reader.onload = function (evt) {
    $scope.$apply(function($scope){
    $scope.myImage=evt.target.result;
   });
  };
  reader.readAsDataURL(file);
  };
  angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
  });

Please help me in this. Thanks

回答1:

I think you should be using the the js file in the compile folder rather than the source folder

ie public/lib/ngImgCrop/compile/unminified/ng-img-crop.js

来源：https://stackoverflow.com/questions/27614857/ngimgcrop-dependency-injection-not-working-properly-in-angularjs

标签

angularjs

image

crop