2016-10-04 150 views
4

我想在我的角度演示項目中實現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的,也是內所示值不能在我的控制器中訪問。我究竟做錯了什麼?

+0

給出的示例您正在使用控制器作爲語法,但未在HTML中指定控制器的別名。你需要使用ng-model =「vm.member_photo」。你的ng-click也一樣。你也有ng-model和{{}}與ng-bind等價。你只需要使用一個 – UserNeD

回答

0

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

模板:

crop-callback="myCallbackFunction" 

在控制器:

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

我是一種新的角度。你能告訴我把回撥電話放在哪裏嗎? – arshad

+0

好吧,那麼你需要提一下哪個確切的庫用於作物特徵..任何鏈接到該庫文檔? – Tushar

+2

它在問題中提到。在第一句話本身。這裏是:https://github.com/AllanBishop/angular-img-cropper – arshad

0

你有各種各樣的問題,大多是從複製而產生和粘貼庫的例子。如果您是Angular的新手,我強烈建議您在實施任何其他庫之前查看角度documentationexamples。話雖這麼說,這裏有一些問題:

  1. 您正在引用在沒有定義模板的控制器。ImageCropperCtrl是在示例中定義的控制器,但不在您提供的代碼中。

    <div ng-controller="ImageCropperCtrl as ctrl"> 
    

    因爲您已經創建了自己的控制器,所以這可能會被刪除。

  2. 您在控制器中未定義的模板中引用一個名爲cropper的對象。你可以看到的例子,他們使用它之前宣佈在ImageCropperCtrl控制器對象:

    $scope.cropper = {}; 
    

    一旦這個變量是在控制器中聲明,你將能夠與$scope.cropper.croppedImage訪問裁剪後的圖像。

  3. 您試圖在整個模板中引用您的控制器爲multiCtrl只有使用controller as語法(類似於庫示例中顯示的內容:​​),這纔會起作用。

    <div ng-controller="multiController"> 
    

    將成爲:

    <div ng-controller="multiController as multiCtrl"> 
    
  4. 您同時使用ng-model和插值({{}})爲textarea你可能只想要ng-model,但我不確定你要在這裏做什麼。

+0

我指出的所有問題都是有效的。如果你打算倒地,留下一個真實的原因。 –

3

由於@Taylor Buchanan已經指出您的代碼有多個問題。我也建議您查看Angular文檔和示例。

除了@泰勒布坎南指出的問題之外,我可以看到您在模板中使用了3個不同的控制器。 multiControllerImageCropperCtrl & 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

+0

感謝您的幫助。我是Angular的新手。而'insideController'在代碼中是一個錯誤。我實際上使用了'multiController'和'ImageCropperCtrl'。在那個'multiController'是我的,'ImageCropperCtrl'是cropper的。我認爲'裁剪需要ImageCropperCtrl'。我仍然不明白。裁剪只能通過注入模塊來使用? 'cropper'可以在'multiController'裏面訪問? – arshad

+0

我們正在我們的控制器中定義'cropper'對象並在html中使用它。你可以任意命名它,但是你需要在你的html中使用相同的變量。裁剪功能'angular-img-cropper'定義了多個'directives'(如'img-cropper-fileread','image-cropper','image','cropped-image',...... ),它可以修剪圖像並將其存儲在您分配給「裁剪圖像」的變量中。 HTH –

+0

該代碼在沒有在控制器中聲明裁剪對象的情況下工作。 – arshad