Невозможно получить доступ к переменной внутри контроллера в угловом

Question

Я пытаюсь реализовать Crop Plugin Library в своем графическом демо-проекте. Я ввел необходимые модули в свой основной модуль и успешно обрезал рис. Но я не знаю, как передать строку base64 в контроллер. То, что я пытался до сих пор:

var myApp = angular.module('myModule', ['ngRoute', 'angular-img-cropper', 'app']); 

myApp.config(function($routeProvider) { 
     $routeProvider 
      .when('/multiple',{ 
        templateUrl: 'templates/multi.html', 
        controller: 'multiController', 
        controllerAs: 'multiCtrl'   
      }) 
}); 

myApp.controller('multiController', function ($scope,$rootScope) { 
     var vm = this; 
     vm.clickButton = function() { 
      console.log("photo: "+vm.member_photo); 
     }; 
}); 

HTML - шаблоны/multi.html:

<h1>Multi page which has another controller inside</h1> 
<div ng-controller="multiController"> 
    <div ng-controller="ImageCropperCtrl as ctrl"> 
    <input type="file" img-cropper-fileread image="cropper.sourceImage" /> 
    <div> 
     <canvas width="500" height="300" id="canvas" image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage" crop-width="500" crop-height="200" min-width="100" min-height="50" keep-aspect="true" crop-area-bounds="bounds"></canvas> 
    </div> 
    <div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div> 
    <div ng-show="cropper.croppedImage!=null"><img ng-model="member_photo1" ng-src="{{cropper.croppedImage}}" /></div> 
     <textarea name="member_photo" ng-model="multiCtrl.member_photo" id="member_photo" class="form-control valid">{{cropper.croppedImage}}</textarea> 
    </div> 
    <button ng-controller="insideController" ng-click="multiCtrl.clickButton()">Console.log</button> 
</div> 

Если я проверить текстовое поле значение там, но это не показано в текстовое поле, а также значение невозможно получить в моем контроллере. Что я делаю не так?

Answer 1

Вы должны указать функцию обратного вызова в своем шаблоне и реализовать функцию обратного вызова урожая в вашем контроллере. Например:

В шаблоне:

crop-callback="myCallbackFunction" 

В контроллере:

vm.myCallbackFunction = function(base64) { 
    vm.resultImage = base64; 
    $scope.$apply(); // Apply the changes. 
}; 

Answer 2

У вас есть целый ряд вопросов, в основном, вытекающий из копирования и вставки примера библиотеки. Если вы новичок в Angular, я настоятельно рекомендую рассмотреть Angular documentation и examples перед внедрением любых дополнительных библиотек. Это, как говорится, вот некоторые из вопросов:

1. Вы ссылаетесь контроллер в шаблоне, который не определен.ImageCropperCtrl - это контроллер, определенный в примере, но не в коде, который вы указали.

   <div ng-controller="ImageCropperCtrl as ctrl"> 
   

   Это возможно, возможно, просто удалить, так как вы создали свой собственный контроллер.

2. Вы ссылаетесь на объект с именем cropper по всему шаблону, который не определен в вашем контроллере. Вы можете увидеть в примере, где они объявляют объект в контроллере ImageCropperCtrl перед использованием его:

   $scope.cropper = {}; 
   

   После того, как эта переменная объявлена ​​в контроллере, вы сможете получить доступ к кадрирования с $scope.cropper.croppedImage.

3. Вы пытаетесь связаться со своим контроллером по всему шаблону как multiCtrl. Это будет работать, только если вы используете синтаксис controller as (аналогично тому, что показано в примере библиотеки: ImageCropperCtrl as ctrl).

   <div ng-controller="multiController"> 
   

   стал бы:

   <div ng-controller="multiController as multiCtrl"> 
   

4. Вы используете как ng-model и интерполяция ({{}}) для textarea. Возможно, вы хотите только ng-model, но я не совсем уверен, что вы пытаетесь сделать здесь.

Answer 3

Как @Taylor Buchanan уже указал, что с кодом есть несколько проблем. И я тоже рекомендую вам просмотреть угловую документацию и примеры.

Помимо проблем, которые указал @Taylor Buchanan, я вижу, что вы использовали 3 разных контроллера в своем шаблоне. multiController, ImageCropperCtrl & insideController. Я не понимаю, почему нужны многие контроллеры.

Также вам не нужна отдельная ng-модель в textarea.

Глядя на ваше требование, я думаю, что одного контроллера достаточно. Здесь sample code @ plunker, который показывает, как можно использовать обрезку изображения и как вы можете получить данные обрезанных изображений в контроллере.

script.js

angular.module('myApp', ['angular-img-cropper']); 

angular.module('myApp').controller("multiController",[ '$scope', function($scope) 
{ 
    $scope.cropper = {}; 
    $scope.cropper.sourceImage = null; 
    $scope.cropper.croppedImage = null; 
    $scope.bounds = {}; 
    $scope.bounds.left = 0; 
    $scope.bounds.right = 0; 
    $scope.bounds.top = 0; 
    $scope.bounds.bottom = 0; 

    $scope.clickButton = function() { 
     console.log("photo: "+ $scope.cropper.croppedImage); 
    }; 
}]); 

index.html

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body ng-app="myApp" ng-controller="multiController"> 
    <h1>Image Cropper Demo</h1> 
    <div> 
     <input img-cropper-fileread="" image="cropper.sourceImage" type="file" /> 
     <div> 
     <canvas width="500" height="300" id="canvas" image-cropper="" image="cropper.sourceImage" cropped-image="cropper.croppedImage" crop-width="400" crop-height="200" keep-aspect="true" touch-radius="30" crop-area-bounds="bounds"></canvas> 
     </div> 
     <div>Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})</div> 
     <div ng-show="cropper.croppedImage!=null"> 
     <img ng-src="{{cropper.croppedImage}}" /> 
     </div> 
     <textarea name="member_photo" id="member_photo" class="form-control valid">{{cropper.croppedImage}}</textarea> 
     <button ng-click="clickButton()">Console.log</button> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 
    <script src="angular-img-cropper.min.js"></script> 
    <script src="script.js"></script> 
    </body> 

</html> 

Примечание: Поскольку я не использовал провайдера маршрута, я должен был явно указать ng-controller на уровне тела. Когда вы используете провайдера маршрута, вам не нужно указывать ng-controller в вашем шаблоне. Проверьте пример, приведенный в $route