Угловая передача параметров в контроллер

Пять различных способов передачи параметров в угловой контроллер

Использование app.value

var app = angular.module(‘app’, []);
app.value(‘firstName’, ‘lastName’).value(‘Kristoffer’,’Karlsson’);
app.controller(‘MyController’, function($scope, firstName, lastName) {
   $scope.firstName = firstName;
   $scope.lastName = lastName; 
 });

Это хорошее решение, поскольку оно работает с существующим механизмом внедрения конструктора. То, что мы здесь делаем, — это в основном создание двух базовых служб «firstName» и «lastName». Об остальном позаботится инжектор.

Использование заводского сервиса

var app = angular.module('app', []);
app.factory('myFactory', function () {
        return {
            firstName: 'Kristoffer',
            lastName: 'Karlsson',
        };
    });
app.controller('MyController', function($scope, myFactory) {
    $scope.firstName = myFactory.firstName;
    $scope.lastName = myFactory.lastName; 
 });

По сути то же самое, что и при использовании app.value. Но здесь мы посылаем фабрику вместо двух сервисов.

Использование параметров маршрута

// Given:
// URL: http://domain.com/index.html#/Chapter/1/Section/2?search=house
// Route: /Chapter/:chapterId/Section/:sectionId
// Then: $routeParams => {chapterId:'1', sectionId:'2', search:'house'}
var app = angular.module('app', []);
app.controller('MyController', function MyController($scope, $routeParams) {
    $scope.chapterId = $routeParams.chapterId;
    $scope.sectionId = $routeParams.sectionId;
    $scope.search = $routeParams.search;
 });

Использование нг-инит

<div data-ng-controller="MyController" data-ng-init="init('Kristoffer','Karlsson')"></div>
var app = angular.module('app', []);
app.controller('MyController', function MyController($scope) {
    $scope.init = function(firstName, lastName)
    {
        $scope.firstName = firstName;
        $scope.lastName = lastName; 
    };
 });

Я бы сделал все возможное, чтобы избежать использования ng-init, поскольку он не соответствует стандартному механизму внедрения контроллера.

Используя директиву

<div data-ng-controller="MyController">
    <input data-ng-model="inputdata.param2">
    <div data-init-data="inputdata.param1='123'; inputdata.param2='321'"></div>
</div>
var app = angular.module('app', []);
app.directive('initData', function($parse) {
        return function($scope, element, $attrs) {
            var model = $parse($attrs.initData);
            model($scope);
        };
    });
app.controller('MyController', function MyController($scope) {
   $scope.inputdata = {param1:"", param2:""};
 });

Полезно знать при работе с контроллерами и шаблонами

В Angular конфигурация никогда не должна диктоваться шаблоном, что по своей сути является тем, чего хотят люди, когда хотят передавать аргументы контроллерам из файла шаблона. Это становится скользкой дорожкой. Если параметры конфигурации жестко закодированы в шаблонах (например, с помощью директивы или атрибута аргумента контроллера), вы больше не сможете повторно использовать этот шаблон для чего-либо, кроме этого единственного использования. Вскоре вы захотите повторно использовать этот шаблон, но с другой конфигурацией, и теперь для этого вы будете либо предварительно обрабатывать шаблоны для ввода переменных, прежде чем они будут переданы в angular, либо использовать массивные директивы для выплевывания гигантских блоки HTML, поэтому вы повторно используете весь HTML-код контроллера, кроме div-оболочки и его аргументов. Для небольших проектов это не имеет большого значения. Для чего-то большого (в чем преуспевает angular) он быстро становится уродливым.

Нашли это полезным? Не забудьте подписаться на меня в twitter.

БТД

1CGu9Ctt1AuyXiWMJ2nEDoH1RRAKtStdjx

Эфириум

0xd2291b554075da7f61210db2648a7f0a2d006190