不能以角度访问控制器内部的变量

问题描述：

我想在我的角度演示项目中实现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>

如果我检查textarea的价值是存在的，但它不是textarea的，也是内所示值不能在我的控制器中访问。我究竟做错了什么？

给出的示例您正在使用控制器作为语法，但未在HTML中指定控制器的别名。你需要使用ng-model =“vm.member_photo”。你的ng-click也一样。你也有ng-model和{{}}与ng-bind等价。你只需要使用一个 – UserNeD

答

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

模板：

crop-callback="myCallbackFunction"

在控制器：

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

我是一种新的角度。你能告诉我把回拨电话放在哪里吗？ – arshad

好吧，那么你需要提一下哪个确切的库用于作物特征..任何链接到该库文档？ – Tushar

它在问题中提到。在第一句话本身。这里是：https://github.com/AllanBishop/angular-img-cropper – arshad

答

你有各种各样的问题，大多是从复制而产生和粘贴库的例子。如果您是Angular的新手，我强烈建议您在实施任何其他库之前查看角度documentation和examples。话虽这么说，这里有一些问题：

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

我指出的所有问题都是有效的。如果你打算倒地，留下一个真实的原因。 –

答

由于@Taylor Buchanan已经指出您的代码有多个问题。我也建议您查看Angular文档和示例。

除了@泰勒布坎南指出的问题之外，我可以看到您在模板中使用了3个不同的控制器。 multiController，ImageCropperCtrl & insideController。我不明白为什么需要这些控制器。

另外你不需要在textarea单独的ng模型。

看你的要求我认为一个控制器就足够了。这里是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="[email protected]" 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

感谢您的帮助。我是Angular的新手。而'insideController'在代码中是一个错误。我实际上使用了'multiController'和'ImageCropperCtrl'。在那个'multiController'是我的，'ImageCropperCtrl'是cropper的。我认为'裁剪需要ImageCropperCtrl'。我仍然不明白。裁剪只能通过注入模块来使用？ 'cropper'可以在'multiController'里面访问？ – arshad

我们正在我们的控制器中定义'cropper'对象并在html中使用它。你可以任意命名它，但是你需要在你的html中使用相同的变量。裁剪功能'angular-img-cropper'定义了多个'directives'（如'img-cropper-fileread'，'image-cropper'，'image'，'cropped-image'，...... ），它可以修剪图像并将其存储在您分配给“裁剪图像”的变量中。 HTH –

该代码在没有在控制器中声明裁剪对象的情况下工作。 – arshad

不能以角度访问控制器内部的变量

相关推荐