AngularJS控制器返回表格

Question

developers! 开发人员！

I decided to try Angular, so I want to make simple image uploading and editing app, in MVC (or close to it) architecture. 我决定尝试Angular，因此我想以MVC （或接近MVC ）架构制作简单的图像上传和编辑应用程序。

And I stuck on entrance point, because of I don't really know how to properly return filled main form from template. 而且我停留在入口点，因为我真的不知道如何正确地从模板返回填充的main form 。

As I think for now - I call controller function first, then it should call mainService function, which builds form, which uses 'imageUploadController' which using imageUploadService . 因为我觉得现在-我称之为controller第一个功能，那么它应该调用mainService功能，它建立的形式，它使用其使用“imageUploadController” imageUploadService 。

But I somesthing tells me that it's not okay to do things like that. 但是我有件事告诉我，做那样的事情是不好的。

My main problem is how to get uploadImageForm.html , pass it to index.html , whithout links or includes (I just want to keep things separately) make sure that services and controllerrs there working properly 我的主要问题是如何获取uploadImageForm.html ，将其传递给index.html ，没有链接或包含（我只想分开保存），以确保那里的服务和控制器正常工作

How the best practices looks like in same situation? 在相同情况下的最佳做法如何？

Here's the code, hope it helps to see problem I got more clearly: 这是代码，希望能帮助我更清楚地看到问题：

Here's my 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>

Here is app.js 这是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"
    }
});

Also I got template imageUploadView 我也有模板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 and service for it (with example code, still debugging it) 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]);
}

}]);

Answer 1

Dont try to get the template from the controller. 不要尝试从控制器获取模板。

You need to use directive. 您需要使用指令。 Make directive with its controller as imageUploadController , its template as imageUploadView and include it inside the index.html 使用控制器作为imageUploadController的Make指令，将其模板作为imageUploadView的模板，并将其包含在index.html中

Your html :- 您的html：-

<body ... >
  <my-directive></my-directive>
</body>
//include directive file,controller files

Directive :- 指令：

    .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 will be automatically rendered in place of directive HTML将自动呈现为指令

AngularJS控制器返回表格

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-08-03 12:15:59

AngularJS控制器返回表格

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-08-03 12:15:59

解决方案1
1 已采纳 2016-08-03 12:15:59