AngularJS - Почему не появляется всплывающее окно ввода файла?

ProgramBox

AngularJS — Почему не появляется всплывающее окно ввода файла?

Post author:admin
Запись опубликована:17 мая, 2023
Post category:Вопросы по программированию

#javascript #angularjs #image #crop

#javascript #angularjs #изображение #обрезка

Вопрос:

Я использую его 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' ]);

Мой файл 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=AIzaSyBN1h8nKcMtDVt2iboiKpmMFvVjxTsnrOIamp;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=$ngImgCropProvider <- $ngImgCrop <- PartialsController

Я следую за этой демонстрацией здесь

Ответ №1:

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

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

Ответ №2:

Проверьте, что обрезка изображения является директивой для AngularJS, и вы получаете ошибку:

Ошибка: $инжектор: unpr неизвестный поставщик Неизвестный поставщик: $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);
}]);

1. вопрос состоит из двух частей, вы решили одну, пожалуйста, скажите мне, почему всплывающее окно с изображением не появляется?

2. похоже, что файл js не работает, я даже пробовал cdn, но окно по-прежнему не появляется

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

4. мой дорогой @yosvel прямо сейчас в консоли нет ошибки после удаления ngimgcrop, но почему мое всплывающее окно не появляется??????/