AngularJSコントローラからフォーム

私は角しようとすることを決めたので、私はMVC（またはそれに近い）で、簡単な画像のアップロードや編集アプリを作りたいアーキテクチャ。

私は実際に正しく返される方法を知らないので、入口から立ち寄ったmain formのテンプレートから。

今のところ私はcontroller関数を呼び出してからmainService関数を呼び出す必要があります。この関数は、imageUploadServiceを使って 'imageUploadController'を使う形式を作ります。

しかし、私はそれがそういうことをするのは大丈夫ではないことを私に伝えています。

私の主な問題は、（私は別に、物事を維持したい）がサービスとcontrollerrsが正しく

どのようにベストプラクティスのルックスを働いていることを確認してくださいリンクwhithout、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]); 
} 

}]);

出典

2016-08-03 DanilGholtsman

いけないコントローラからテンプレートを取得しよう（例のコードで、まだそれをデバッグします）。

ディレクティブを使用する必要があります。 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は指示の代わりに自動的にレンダリングされます

出典

2016-08-03 12:15:59

うわー、ありがとう！しかし、制御部形式の指令を分離して別々に保管する方法はありますか？ – DanilGholtsman

はい、コントローラ：「コントローラ名」.But孤立スコープを持つようにディレクティブを構築するためには、コントローラは、私が 'VARのコントローラ名= [「$スコープ」機能を使用する必要があります同じように、ディレクティブ内で使用し、他のコントローラ –

ああにリンクされていません（$ scope）{/ ** somestuff * /}] 'の中にありますか？それは私のコントローラのための別のファイルを持っていないので大丈夫ですか？ //コントローラの場所に – DanilGholtsman

AngularJSコントローラからフォーム

答えて

関連する問題