[英]AngularJS controller returns form
開發人員!
我決定嘗試Angular,因此我想以MVC
(或接近MVC
)架構制作簡單的圖像上傳和編輯應用程序。
而且我停留在入口點,因為我真的不知道如何正確地從模板返回填充的main form
。
因為我覺得現在-我稱之為controller
第一個功能,那么它應該調用mainService
功能,它建立的形式,它使用其使用“imageUploadController” imageUploadService
。
但是我有件事告訴我,做那樣的事情是不好的。
我的主要問題是如何獲取uploadImageForm.html
,將其傳遞給index.html
,沒有鏈接或包含(我只想分開保存),以確保那里的服務和控制器正常工作
在相同情況下的最佳做法如何?
這是代碼,希望能幫助我更清楚地看到問題:
這是我的index.html
<!doctype html>
<html lang="en" ng-app="modernFilter">
<head>
<meta charset="utf-8">
<title>Modern.Filters</title>
<script src="asstes/libs/angular.min.js"></script>
<script src="app/components/app.js"></script>
<script src="app/shared/imageUploadController.js"></script>
</head>
<body ng-controller = "mainController">
<span>{{mainForm}}</span>
</body>
</html>
這是app.js
'use strict';
// Define the `modern.filter` module
var modernFilterApp = angular.module('modernFilter', []);
// Define main controller
modernFilterApp.controller('mainController', ['$scope', function($scope, mainService){
// Stores form data
$scope.mainForm = null;
// Returns main form template
$scope.getMainForm = function(){
$scope.mainForm = mainService.getMainForm();
}
// Call function on documentready
angular.element(document).ready(function () {
$scope.getMainForm();
//todo: is it even okay? but without it nothing happens
$scope.$apply();
})
}]);
// Define service
modernFilterApp.service('mainService', function(mainService){
this.getMainForm = function(){
// todo: how should I get template here?
return "filled form template from here"
}
});
我也有模板imageUploadView
<div ng-controller="imageUploadController">
<canvas id="imageCanvas"></canvas>
<form action="">
<input my-upload type="file" name="upload" onchange="angular.element(this).scope().uploadImage()">
</form>
Cotroller及其服務(帶有示例代碼,仍在調試中)
modernFilterApp.controller('imageUploadController', ['$scope', 'imageUploadService', function($scope, imageUploadService) {
// Stores image
$scope.image = null;
// Returns main form template
$scope.uploadImage = function() {
$scope.image = imageUploadService.handleImage(arguments);
}
}]);
// Define upload service
modernFilterApp.service('imageUploadService', function(imageUploadService) {
// Function handles uploaded files (dirty code)
this.handleImage = function(event) {
var canvas = angular.element('#imageCanvas'),
context = canvas.getContext('2d'),
reader = new FileReader(),
img = new Image();
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
img.src = event.target.result;
return reader.readAsDataURL(e.target.files[0]);
}
}]);
不要嘗試從控制器獲取模板。
您需要使用指令。 使用控制器作為imageUploadController的Make指令,將其模板作為imageUploadView的模板,並將其包含在index.html中
您的html:-
<body ... >
<my-directive></my-directive>
</body>
//include directive file,controller files
指令:
.directive('myDirective', ['your service',function(your service) {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'template url',
link: function (scope) {
},
controller : function($scope){
//your controller
}
};
}]);
HTML將自動呈現為指令
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.