AngularJS 控制器返回表单答案

【问题标题】：AngularJS controller returns formAngularJS 控制器返回表单
【发布时间】：2016-08-03 12:08:39
【问题描述】：

开发者！

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

我卡在入口点，因为我真的不知道如何从模板正确返回填充的main form。

我现在想 - 我首先调用 controller 函数，然后它应该调用 mainService 函数，它构建表单，它使用使用 imageUploadService 的“imageUploadController”。

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

我的主要问题是如何获取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>

控制器及其服务（带有示例代码，仍在调试中）

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

}]);

【问题讨论】：

标签： javascript angularjs model-view-controller dynamicform

【解决方案1】：

不要尝试从控制器获取模板。

你需要使用指令。用它的控制器作为 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 将代替指令自动呈现

【讨论】：

哇，谢谢！但是有没有办法将控制器部分表单指令分开并单独保存？
是的，控制器：“控制器名称”。但是要构建具有隔离范围的指令，控制器用于指令内部而不链接到其他控制器
哦，就像我应该使用var controllerName = ['$scope', function ($scope) { /** somestuff */}]inside 一样？所以我的控制器没有单独的文件可以吗？
在 //your controller 的位置，将代码放在 imageUploadController 中。要为控制器创建单独的文件，只需在指令中执行控制器：“imageUploadController”并保持相同，即 yourApp.controller('imageUploadController',function($scope){})
for 指令意味着在同一个地方定义控制器 .. 因为它的用途是创建可重用的组件以及 dom 操作