AngularJS控制器返回表单
AngularJS controller returns form
开发人员!
我决定尝试Angular,所以我想在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,模板为imageUpload View,并将其包含在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将自动呈现以代替指令
相关文章:
- JavaScript表单返回,但无法正常工作
- Ajax向表单返回false
- Javascript表单返回未定义的
- HTML表单返回并下载文件时显示进度掩码
- AngularJS表单返回undefined
- 在表单返回false后插入append
- 从ajax表单返回值
- 如何使用JavaScript/jQuery在没有AJAX的情况下获得表单返回
- MVC html开始表单返回JavaScript操作结果
- 联系表单返回空白页
- 在用户更正错误后,Jquery中没有提交表单(返回false;)
- 流星使用namedContext添加invalidkeys到AutoForm表单返回一个错误
- 条形表单返回丢失的参数
- JavaScript.表单返回意外的表单
- 需要帮助从HTML表单返回数据在新的HTML页面使用JavaScript
- Javascript中的表单返回一个"undefined"警报
- Ajax表单:返回的值错误
- PHP/Javascript搜索表单返回所有行,而不是匹配搜索词的行
- 表单返回false javascript后仍然提交
- Ajax表单返回错误