无法以角度访问控制器内部的变量

Question

I am trying to implement a Crop Plugin Library in my angular demo project. 我正在尝试在我的角度演示项目中实现Crop插件库 。 I have injected the required modules to my main module and successfully cropped a pic. 我已经将所需的模块注入到我的主模块中，并成功裁剪了一张照片。 But I don't know how to pass the base64 string to the controller. 但是我不知道如何将base64字符串传递给控制器。 What I have tried so far is: 到目前为止，我尝试过的是：

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: 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 inspect the textarea the value is there but it is not shown inside the textarea and also the value cannot be accessed inside my controller. 如果我检查了textarea，则该值存在，但未在textarea中显示，并且该值也无法在控制器内部访问。 What am I doing wrong? 我究竟做错了什么？

Answer 1

As @Taylor Buchanan has already pointed out there are multiple issues with your code. 正如@Taylor Buchanan指出的那样，您的代码存在多个问题。 And I too recommend that you review Angular documentation and examples. 我也建议您阅读Angular文档和示例。

Apart from the issues that @Taylor Buchanan has pointed out, I can see that you have used 3 different controllers in your template. 除了@Taylor Buchanan指出的问题外，我可以看到您在模板中使用了3个不同的控制器。 multiController , ImageCropperCtrl & insideController . multiController ， ImageCropperCtrl和insideController 。 I don't understand why those many controllers are needed. 我不明白为什么需要那么多控制器。

Also you don't need separate ng-model at textarea. 另外，您在textarea不需要单独的ng-model。

Looking at your requirement I think a single controller is sufficient. 考虑到您的需求，我认为一个控制器就足够了。 Here is sample code @ plunker that shows how the image cropper can be used and how you can get the cropped image data in controller. 这里是示例代码@ plunker ，它显示了如何使用图像裁剪器以及如何在控制器中获取裁剪后的图像数据。

script.js 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 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>

Note: As I have not used route provider, I had to explicitly specify ng-controller at body level. 注意：由于我没有使用路由提供程序，因此必须在主体级别显式指定ng-controller 。 When you use route provider you don't need to specify ng-controller in your template. 使用路由提供程序时，无需在模板中指定ng-controller 。 Check the example given at $route 查看$ route给出的示例

Answer 2

You have to specify the callback function in your template and implement the crop callback function in your controller. 您必须在模板中指定回调函数，并在控制器中实现裁剪回调函数。 For example : 例如：

In template: 在模板中：

crop-callback="myCallbackFunction"

In controller: 在控制器中：

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

Answer 3

You have a variety of issues, mostly stemming from copying and pasting the library example. 您遇到各种各样的问题，主要是由于复制和粘贴库示例而引起的。 If you are new to Angular, I strongly suggest reviewing the Angular documentation and examples prior to implementing any additional libraries. 如果您是Angular的新手，我强烈建议您在实施任何其他库之前，先阅读Angular 文档和示例。 That being said, here are some of the issues: 话虽这么说，这里有一些问题：

You are referencing a controller in the template that is not defined. 您正在引用模板中未定义的控制器。 ImageCropperCtrl is a controller defined in the example, but not in the code you provided. ImageCropperCtrl是示例中定义的控制器，但不是您提供的代码中定义的控制器。
```
 <div ng-controller="ImageCropperCtrl as ctrl"> 
```
This can probably just be removed since you've created your own controller. 由于您已经创建了自己的控制器，因此可以将其删除。
You are referencing an object called cropper throughout the template that is not defined in your controller. 您正在整个控制器中引用未在控制器中定义的名为cropper的对象。 You can see in the example where they declare the object in the ImageCropperCtrl controller prior to using it: 您可以在示例中看到他们在使用对象之前在ImageCropperCtrl控制器中声明该对象的情况：
```
 $scope.cropper = {}; 
```
Once this variable is declared in your controller, you will be able to access the cropped image with $scope.cropper.croppedImage . 在控制器中声明了此变量后，您将可以使用$scope.cropper.croppedImage访问裁剪的图像。
You are attempting to reference your controller throughout the template as multiCtrl . 您试图在整个模板multiCtrl控制器作为multiCtrl 。 This will only work if you use the controller as syntax (similar to what is shown in the library example: ImageCropperCtrl as ctrl ). 仅在将控制器用作语法时才有效（类似于库示例中显示的内容： ImageCropperCtrl as ctrl ）。
```
 <div ng-controller="multiController"> 
```
would become: 会成为：
```
 <div ng-controller="multiController as multiCtrl"> 
```
You are using both ng-model and interpolation ( {{}} ) for the textarea . 您正在将ng-model和插值（ {{}} ）用于textarea 。 You probably only want ng-model , but I'm not really sure what you're trying to do here. 您可能只想使用ng-model ，但是我不太确定您要在这里做什么。

无法以角度访问控制器内部的变量

问题描述

3 个解决方案

解决方案1
3 2016-11-05 05:48:06

解决方案2
0 2016-10-04 04:47:52

解决方案3
0 2016-11-05 05:04:10

无法以角度访问控制器内部的变量

问题描述

3 个解决方案

解决方案1 3 2016-11-05 05:48:06

解决方案2 0 2016-10-04 04:47:52

解决方案3 0 2016-11-05 05:04:10

解决方案1
3 2016-11-05 05:48:06

解决方案2
0 2016-10-04 04:47:52

解决方案3
0 2016-11-05 05:04:10