AngularJs - 爲什麼文件輸入彈出不來？

我正在使用ngimgCrop上傳圖片，但是當我點擊browse時，彈出框未出現。它出什麼問題了？AngularJs - 爲什麼文件輸入彈出不來？

我控制器

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' ]);

我createbusiness文件

<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

來源

2016-10-24 Usman Iqbal

中刪除myController的和ngImgCrop與對myApp對象 –

只是一個想法創建控制器：使用'URL.createObjectURL'的FileReader代替 – Endless

ngImgCrop狀態的readme，您應該將ngImgCrop包含到應用程序依賴項中，而不是控制器依賴項中。

這應該解決角度未知提供者錯誤。

來源

2016-10-24 11:53:11 table

是的我也是那樣做的，但消失了但瀏覽部分還在不工作 –

檢查Image Crop是AngularJS一個指令和你所得到的錯誤：

Error: $injector:unpr Unknown Provider Unknown provider: $ngImgCropProvider <- $ngImgCrop <- PartialsController

因爲你想在你的PartialsController注入$ngImgCrop和服務不存在。

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

來源

2016-10-24 11:56:54

問題有兩個部分你解決了一個，請問我爲什麼圖像彈出框沒有出現？ –

看起來像js文件不工作我甚至嘗試過cdn，但仍未出現該框 –

刪除'$ ngImgCrop'後，控制檯中出現錯誤？ –

AngularJs - 爲什麼文件輸入彈出不來？

回答

相關問題