Це питання давнє, але я довго боровся, намагаючись отримати відповідь на цю проблему, яка би спрацювала на мої потреби та не легко її знайшла. Я вважаю, що моє наступне рішення набагато краще, ніж прийняте на даний момент, можливо, тому, що кутова додала функціональність, оскільки це питання було спочатку задано.
Коротка відповідь, використовуючи метод Module.value, дозволяє передавати дані в конструктор контролера.
Подивіться тут мого викрадача
Я створюю об'єкт моделі, потім пов'язую його з контролером модуля, посилаючись на ім'я 'модель'
HTML / JS
<html>
<head>
<script>
var model = {"id": 1, "name":"foo"};
$(document).ready(function(){
var module = angular.module('myApp', []);
module.value('model', model);
module.controller('MyController', ['model', MyController]);
angular.bootstrap(document, ['myApp']);
});
function confirmModelEdited() {
alert("model name: " + model.name + "\nmodel id: " + model.id);
}
</script>
</head>
<body >
<div ng-controller="MyController as controller">
id: {{controller.model.id}} <br>
name: <input ng-model="controller.model.name"/>{{controller.model.name}}
<br><button ng-click="controller.incrementId()">increment ID</button>
<br><button onclick="confirmModelEdited()">confirm model was edited</button>
</div>
</body>
</html>
Конструктор у моєму контролері потім приймає параметр із тією самою моделлю "модель", до якої він може отримати доступ.
Контролер
function MyController (model) {
this.model = model;
}
MyController.prototype.incrementId = function() {
this.model.id = this.model.id + 1;
}
Примітки:
Я використовую вручну ініціалізацію завантажувального завантаження , що дозволяє мені ініціалізувати свою модель, перш ніж надсилати її на кутовий. Це відіграє набагато приємніше з наявним кодом, оскільки ви можете дочекатися налаштування відповідних даних та лише скласти кутовий підмножина свого додатка на вимогу, коли захочете.
У планку я додав кнопку для попередження значень об’єкта моделі, який спочатку був визначений у JavaScript та переданий у кутовий, просто для підтвердження того, що кутовий справді посилається на об'єкт моделі, а не копіює його та працює з копією.
У цьому рядку:
module.controller('MyController', ['model', MyController]);
Я передаю об’єкт MyController у функцію Module.controller, а не декларую як функцію вбудованої. Я думаю, що це дозволяє нам значно чіткіше визначити наш об’єкт контролера, але кутова документація має тенденцію робити це вбудовано, тому я подумав, що він має уточнення.
Я використовую синтаксис "контролер як" і призначаю значення властивості "це" MyController, а не використовую змінну "$ range". Я вважаю, що це буде добре працювати, використовуючи параметр $ range так само, призначення контролера буде виглядати приблизно так:
module.controller('MyController', ['$scope', 'model', MyController]);
і конструктор контролера мав би такий підпис:
function MyController ($scope, model) {
Якщо з будь-якої причини ви цього хотіли, ви також можете приєднати цю модель як значення другого модуля, який ви потім додаєте як залежність до свого основного модуля.
Я вважаю, що його рішення набагато краще, ніж прийняте в даний час
- Модель, передана контролеру, насправді є об’єктом javascript, а не рядком, який оцінюється. Це справжня посилання на об'єкт, і зміни на нього впливають на інші посилання на цей об'єкт моделі.
- Angular каже, що використання ng-init у прийнятій відповіді - це неправильне використання, яке це рішення не робить.
У тому, як працює Angular у більшості інших прикладів, які я бачив, контролер визначає дані моделі, що для мене ніколи не мало сенсу, між моделлю та контролером немає поділу, що насправді не схоже на MVC мені. Це рішення дозволяє реально мати абсолютно окремий об'єкт моделі, який ви передаєте в контролер. Також слід врахувати, що якщо ви використовуєте директиву ng-include, ви можете помістити весь кутовий HTML в окремий файл, повністю розділяючи перегляд моделі та контролер на окремі модульні частини.