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 - 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＆amp; insideController。我不明白为什么需要这么多控制器。

此外，您不需要在textarea上单独使用ng-model。

根据您的要求，我认为单个控制器就足够了。以下是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

中给出的示例

Answer 2

您必须在模板中指定回调函数，并在控制器中实现裁剪回调函数。例如：

在模板中：

crop-callback="myCallbackFunction"

在控制器中：

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

Answer 3

您遇到了各种各样的问题，主要源于复制和粘贴库示例。如果您不熟悉Angular，我强烈建议您在实施任何其他库之前先查看Angular documentation和examples。话虽如此，这里有一些问题：

您正在模板中引用未定义的控制器。 ImageCropperCtrl是示例中定义的控制器，但不在您提供的代码中。
```
<div ng-controller="ImageCropperCtrl as ctrl">
```
这可能只是因为您已经创建了自己的控制器而被删除。
您正在引用未在控制器中定义的模板中名为cropper的对象。您可以在示例中看到它们在{{{ 1}}控制器在使用之前：
```
ImageCropperCtrl
```
在控制器中声明此变量后，您将能够使用$scope.cropper = {};访问裁剪后的图像。
您正试图在整个模板中引用您的控制器$scope.cropper.croppedImage。这仅在您使用controller as语法时有效（类似于显示的内容）在库示例中：multiCtrl）。
```
ImageCropperCtrl as ctrl
```
会变成：
```
<div ng-controller="multiController">
```
您正在<div ng-controller="multiController as multiCtrl">使用ng-model和插值（{{}}）。您可能只需要textarea，但我不确定你在这里要做什么。

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

3 个答案: