Unable to access variable controller inside angular controller

Question

Unable to access variable controller inside angular controller

I am trying to implement the Crop Plugin Library in an angular demo project. I inserted the necessary modules into my main module and successfully trimmed the pic. But I do not know how to pass the base64 string to the controller. I have tried so far:

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 Templates / 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>

If I check the text field, this value is there, but it does not appear inside the text field, and also the value cannot be accessed inside my controller. What am I doing wrong?

+4

javascript angularjs

arshad Oct 4 '16 at 4:41

source share

3 answers

Vivek Athalye · Answer 1 · 2016-11-05T05:48:06+0000

@Taylor Buchanan, . Angular.

, @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

Tushar · Answer 2 · 2016-10-04T04:47:52+0000

crop . :

:

crop-callback="myCallbackFunction"

:

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

Taylor buchanan · Answer 3 · 2016-11-05T05:04:10+0000

, - . Angular, Angular - . , :

, . ImageCropperCtrl - , , , .

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

, , , .

cropper , . , ImageCropperCtrl :
```
$scope.cropper = {};
```
, $scope.cropper.croppedImage.
You are trying to reference your controller throughout the template as multiCtrl. This will only work if you use it as a syntax (similar to what is shown in the library example:) ImageCropperCtrl as ctrl.
```
<div ng-controller="multiController">
```
will become:
```
<div ng-controller="multiController as multiCtrl">
```
You use ng-modeland interpolation ( {{}}) for textarea. . You probably only want to ng-model, but I'm not quite sure that you are here. You are trying to do this.

Unable to access variable controller inside angular controller

More articles: