AngularJS контроллер возвращает форму

0

Разработчики!

Я решил попробовать Angular, поэтому я хочу сделать простое приложение для загрузки и редактирования изображений в архитектуре MVC (или рядом с ним).

И я застрял в точке входа, потому что я действительно не знаю, как правильно вернуть заполненную main form из шаблона.

Как я сейчас думаю, я сначала вызываю функцию controller, затем она должна вызывать функцию mainService, которая строит форму, которая использует "imageUploadController", которая использует imageUploadService.

Но мне кажется, что делать это нехорошо.

Моя основная проблема заключается в том, как uploadImageForm.html, передать его в index.html, без ссылок или uploadImageForm.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]);
}

}]);
Теги:
model-view-controller
dynamicform

1 ответ

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

См. Здесь

Html будет автоматически отображаться вместо директивы

Поделиться
  • 0
    Вау, спасибо! Но есть ли способ отделить директиву формы части контроллера и хранить ее отдельно?
  • 0
    Да, контроллер: «имя контроллера». Но для создания директив, чтобы иметь изолированную область видимости, контроллер используется внутри директивы и не связан с другим контроллером
Показать ещё 12 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню