Question

我正在使用ngimgCrop上传我的图片，但是当我点击browse时，弹出框就不会出现。这有什么不对吗？

我的控制器

categoriesControllers.controller('PartialsController', ['$scope', '$http', '$rootScope', '$routeParams', '$ngImgCrop','$location', function ($scope, $http, $rootScope, $routeParams, $ngImgCrop, $location) { $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);}]);

我的app.js

var myApp = angular.module('myApp', [
'ngRoute', // we are telling angular that we are using ngRouting feature that enables deeplinking first
'vsGoogleAutocomplete',
'categoriesControllers', 
'ngImgCrop' ]);

我的创建业务文件

 <div class="form-group form-group-icon-left">
    <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 ng-src="{{myCroppedImage}}" /></div>        

</div>

，最后我的索引文件

 <!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>EventOber | Every event to be rated</title>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta name="keywords" content="Salons, Stylsts, Weave Suppliers, Lashes" />
        <meta name="description" content="Discuss Salons, Stylists, Weave Suppliers, Lashes that you know">
        <meta name="author" content="Centangle">
        <link rel='shortcut icon' type='image/x-icon' href='/images/favicon.ico' />
        <meta name='viewport' content="width=device-width, initial-scale=1.0">
        <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css'>
        <link href="css/angular-input-stars.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/styles.css">
        <link rel="stylesheet" href="css/mystyles.css">
        <!--Angular files -->
</head>
    <body>
        <div id="fb-root"></div>
               <div class="global-wrap">
               <div ng-view></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
    <!--    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>-->
    <script src="js/ng-img-crop.js" type="text/javascript"></script>
    <link href="css/ng-img-crop.css" rel="stylesheet" type="text/css"/>
    <script src="js/vs-google-autocomplete.min.js" type="text/javascript"></script>
    <script src="js/angular-input-stars.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>   
    <script src="js/controllers.js" type="text/javascript"></script>
    <script src="https://code.angularjs.org/1.5.8/angular-cookies.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/slimmenu.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/bootstrap-timepicker.js"></script>
    <script src="js/nicescroll.js"></script>
    <script src="js/dropit.js"></script>
    <script src="js/ionrangeslider.js"></script>
    <script src="js/icheck.js"></script>
    <script src="js/fotorama.js"></script>
    <script src="js/typeahead.js"></script>
    <script src="js/card-payment.js"></script>
    <script src="js/magnific.js"></script>
    <script src="js/owl-carousel.js"></script>
    <script src="js/fitvids.js"></script>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <!--Include map api key after jquery -->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBN1h8nKcMtDVt2iboiKpmMFvVjxTsnrOI&libraries=places"></script>  
    <!-- include map api key after jquery -->
</body>
</html>

我在控制器功能

中编写ngImgcrop时出现此错误

Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24ngImgCropProvider%20%3C-%20%24ngImgCrop%20%3C-%20PartialsController

我正在关注此演示Here

Answer 1

ngImgCrop的readme指出，您应该将ngImgCrop包含在应用程序依赖项中，而不是包含在控制器依赖项中。

这应解决角度未知提供程序错误。

Answer 2

检查Image Crop是否是AngularJS的指令，并且您收到错误：

错误：$ injector：unpr未知提供商 未知提供者：$ ngImgCropProvider＆lt; - $ ngImgCrop＆lt; - PartialsController

因为您试图在$ngImgCrop中注入PartialsController并且该服务不存在。

<强> PartialsController ：

删除$ngImgCrop依赖项并且应该有效：

categoriesControllers.controller('PartialsController', ['$scope', '$http', '$rootScope', '$routeParams','$location', function ($scope, $http, $rootScope, $routeParams, $location) { 
    $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);
}]);

AngularJs - 为什么文件输入弹出不来？

2 个答案: