控制台上的Angular Js“Uncaught Error：No module：uiCropper”错误

Question

您好我想在我的页面上实现图像裁剪器。我找到了Codepen中的一些代码。我使用了相同的代码，但代码无效，并显示以下错误

angular.module('app', ['uiCropper'])
  .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);
  });

.cropArea {
  background: #E4E4E4;
  overflow: hidden;
  font-size: 0px;
  line-height: 0px;
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<table ng-app="app" ng-controller="Ctrl">
  <td>
    <div>Cropped Image:</div>
    <div><img ng-src="{{myCroppedImage}}" /></div>
  </td>
  <td>
    <div class="cropArea"><div ng-hide="myCroppedImage">Select an image file: <input type="file" id="fileInput" /></div>    
    <ui-cropper image="myImage" area-type="circle" chargement="'Loading'" result-image="myCroppedImage" canvas-scalemode="true"></ui-cropper>
    </div>
  </td>
</table

Answer 1

您需要引用您未使用代码完成的javascript，

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"> </script>

Answer 2

那是因为你没有在index.html中注入uiCropper js文件。你必须在index.html中包含uiCropper js。添加此文件t index.html并检查。

<script src="http://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"></script>