無法以角度訪問控制器內部的變量

Question

我正在嘗試在我的角度演示項目中實現Crop插件庫 。 我已經將所需的模塊注入到我的主模塊中，並成功裁剪了一張照片。 但是我不知道如何將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-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>

如果我檢查了textarea，則該值存在，但未在textarea中顯示，並且該值也無法在控制器內部訪問。 我究竟做錯了什么？

Answer 1

正如@Taylor Buchanan指出的那樣，您的代碼存在多個問題。 我也建議您閱讀Angular文檔和示例。

除了@Taylor Buchanan指出的問題外，我可以看到您在模板中使用了3個不同的控制器。 multiController ， ImageCropperCtrl和insideController 。 我不明白為什么需要那么多控制器。

另外，您在textarea不需要單獨的ng-model。

考慮到您的需求，我認為一個控制器就足夠了。 這里是示例代碼@ 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給出的示例

Answer 2

您必須在模板中指定回調函數，並在控制器中實現裁剪回調函數。 例如：

在模板中：

crop-callback="myCallbackFunction"

在控制器中：

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

Answer 3

您遇到各種各樣的問題，主要是由於復制和粘貼庫示例而引起的。 如果您是Angular的新手，我強烈建議您在實施任何其他庫之前，先閱讀Angular 文檔和示例。 話雖這么說，這里有一些問題：

您正在引用模板中未定義的控制器。 ImageCropperCtrl是示例中定義的控制器，但不是您提供的代碼中定義的控制器。
```
 <div ng-controller="ImageCropperCtrl as ctrl"> 
```
由於您已經創建了自己的控制器，因此可以將其刪除。
您正在整個控制器中引用未在控制器中定義的名為cropper的對象。 您可以在示例中看到他們在使用對象之前在ImageCropperCtrl控制器中聲明該對象的情況：
```
 $scope.cropper = {}; 
```
在控制器中聲明了此變量后，您將可以使用$scope.cropper.croppedImage訪問裁剪的圖像。
您試圖在整個模板multiCtrl控制器作為multiCtrl 。 僅在將控制器用作語法時才有效（類似於庫示例中顯示的內容： ImageCropperCtrl as ctrl ）。
```
 <div ng-controller="multiController"> 
```
會成為：
```
 <div ng-controller="multiController as multiCtrl"> 
```
您正在將ng-model和插值（ {{}} ）用於textarea 。 您可能只想使用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