我正在尝试实现 Crop Plugin Library在我的 Angular 演示项目中。我已将所需的模块注入(inject)我的主模块并成功裁剪了一张图片。但我不知道如何将 base64 字符串传递给 Controller 。到目前为止我尝试过的是:
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 内，而且我的 Controller 内也无法访问该值。我做错了什么？
最佳答案
正如@Taylor Buchanan 已经指出的，您的代码存在多个问题。我也建议您查看 Angular 文档和示例。
除了@Taylor Buchanan 指出的问题外，我可以看到您在模板中使用了 3 个不同的 Controller 。 multiController、ImageCropperCtrl 和 insideController。我不明白为什么需要那么多 Controller 。
此外，您不需要在文本区域中使用单独的 ng-model。
根据您的要求，我认为一个 Controller 就足够了。 这是 sample code @ plunker这显示了如何使用图像裁剪器以及如何在 Controller 中获取裁剪后的图像数据。
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 中给出的示例
关于javascript - 无法以 Angular 访问 Controller 内部的变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39844294/