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

Удалить ngImgCrop в MyController и создать контроллер с объектом MYAPP –

Просто идея: использовать 'URL.createObjectURL' вместо FileReader – Endless

readme состояний ngImgCrop, что вы должны включить ngImgCrop в зависимости от приложений, а не от зависимостей между контроллерами.

Это должно устранить погрешность неизвестного поставщика.

источник

2016-10-24 11:53:11 table

Да, я тоже это сделал, уходит, но часть обзора не работает –

Убедитесь, что Image Crop директива для AngularJS и вы получаете сообщение об ошибке:

Error: $injector:unpr Unknown Provider Unknown provider: $ngImgCropProvider <- $ngImgCrop <- 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); 
}]);

источник

2016-10-24 11:56:54

Вопрос состоит из двух частей, которые вы решили: plz telll me, почему изображение не появляется? –

похоже, что файл js не работает. Я даже попробовал cdn, но все же ящик не появляется. –

После удаления '$ ngImgCrop' вы получаете ошибку в консоли? –

AngularJs - Почему входной файл не появляется?

ответ

Смежные вопросы