gpt4 book ai didi

javascript - AngularJS Controller 返回表单

转载 作者:行者123 更新时间:2023-12-03 06:23:52 28 4
gpt4 key购买 nike

开发者!

我决定尝试 Angular,所以我想在 MVC (或接近它的)架构中制作简单的图像上传和编辑应用程序。

我陷入了入口点,因为我真的不知道如何从模板正确返回填充的主表单

正如我现在所想 - 我首先调用 controller 函数,然后它应该调用 mainService 函数,该函数构建表单,该表单使用“imageUploadController”,该表单使用 imageUploadService.

但我有件事告诉我,这样做是不对的。

我的主要问题是如何获取uploadImageForm.html,将其传递给index.html,没有链接或包含(我只想将东西分开)确保那里的服务和 Controller 正常工作

相同情况下的最佳实践如何?

这是代码,希望它有助于更​​清楚地看到我遇到的问题:

这是我的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>

Controller 及其服务(带有示例代码,仍在调试)

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]);
}

}]);

最佳答案

不要尝试从 Controller 获取模板。

您需要使用指令。制作指令,其 Controller 为 imageUploadController ,其模板为 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
}
};
}]);

Refer here

Html 将自动呈现以代替指令

关于javascript - AngularJS Controller 返回表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38743250/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com