Сам AngularJS предоставил такие методы, как директива и сервисная служба для реализации обмена и повторного использования данных и кода. Однако в реальной разработке проекта, возможно, из -за того, что вы ленивы или для удобства, вы всегда захотите напрямую передавать обмен данными между двумя контроллерами или функциями вызова и методами. Здесь мы посмотрим, какие методы могут удовлетворить это требование.
Служба Синглтона
Singleton Service - это метод обмена данными и кодом, поддерживаемый самим AngularJS. Поскольку это синглтон, все контроллеры получают доступ к одни и те же данные. Например, можно реализовать следующую службу:
Angular .Module ('app') .service ('ObjectService', [ObjectService]); функция ObjectService () {var list = {}; return {get: function (id) {return list [id]; }, set: function (id, v) {list [id] = v; }};} В одном контроллере, набор данных, ObjectService.set('i', 1) можно получить через ObjectService.get('i') в других контроллерах.
Вещание и события
В AngularJS параметры могут быть переданы при запуска событий и отправке трансляций. Эта функция может быть использована для реализации обмена данными. Есть три метода, связанные с событиями и трансляциями, а именно:
1. $ EMIT (): событие триггера, он может передавать данные вверх, например, контроллер ребенка на родительский контроллер и контроллер к $ ROOTSCOPE
2. $ broadcast (): Отправить трансляцию, которая может передавать данные, например, родительский контроллер передает данные для ребенка -контроллера, или $ Rootscope передает данные любому контроллеру
3. $ on (): слушайте события и трансляции, и может захватить $ Emit и $ трансляцию
Связь между контроллерами может быть разделена на три ситуации:
1. Без контроллера прямой ассоциации: используйте $ rootscope. $ Emit (), $ rootscope. $ Boardcast () или $ scope. $ Emit для излучения данных и получения данных через $ rootcope. $ On ()
2. Родительский контроллер для дочернего контроллера: родительский контроллер использует $ scope. $ Boradcast () для отправки данных, а дочерний контроллер использует $ scope. $ () Для получения данных
3. Дочерний контроллер к родителю: дочерний контроллер использует $ scope. $ Emit () для отправки данных, а родительский контроллер получает данные через $ scope. $ On ()
Вот простое использование:
// One ControlerRangular .Module ('app') .controller ('OneController', ['$ scope', onecontroller]); function oneController ($ scope) {var data = {value: 'test'}; $ ourtscope. $ broadcast ('open.notice.editor', data);} // Другое Controlerrangular .module ('app') .controller ('notherController', ['$ scope', inome controller]); функция другого Controller ($ scope) {$ scope. $ scope.open (data);Родительский контроллер
Если оба контроллера совместно используют один и тот же родительский контроллер, обмен данными и связь может быть выполнена через родительский контроллер. например:
<div ng-controller = "parentController"> <div ng-controller = "ChildOneController"> </div> <div ng-controller = "ChildtwoController"> </div> </div>
// Угловой контроллер. ['$ scope', kidleonecontroller]); function ChildOneController ($ scope) {// Установка данных $ scope. $ parent.data = 1;} // gildcontroller gongular .module ('app') .controller ('Childtwocontroller', ['$ scope', $ timeout ', функция chidletroller'); ChildtwoController ($ scope, $ timeout) {$ timeout (function () {// data Read Console.log ($ scope. $ Parent.data);}, 1000);}Глобальные или общие переменные
AngularJS обеспечивает инкапсуляцию двух переменных, $ window и $ LocalStorage . Изменение и прослушивание этих двух значений может быть достигнуто обмен данными и связь между контроллерами. Метод заключается в следующем:
// One Controlerrangular .Module ('app') .controller ('oneController', ['$ scope', '$ window', oneController]); функция OneController ($ scope, $ windo ['$ scope', inome controller]); function function orhycontroller ($ scope) {// прослушивать изменение $ scope. $ watch (function () {return $ window.data;}, function (n) {$ scope.windowdata = n;});}Фактически, этот метод мониторинга и модификации также может использоваться в других методах связи.
Связывание элемента
В AngularJs вы можете получить экземпляр контроллера на нем через элемент. Таким образом, вы можете быстро получить
Измените данные в контроллере или вызовите методы в этом контроллере. например:
<div ng-controller = "appcontroller"> <div id = "div-a"> </div> </div>
Вы можете получить экземпляр контроллера по следующим методам:
var Encament = angular.Element (document.getElementById ('div-A')). Scope ();Затем вы можете использовать этот экземпляр для вызова метода контроллера для получения и изменения значения. Невозможно успешно получить, должен ли сам элемент иметь контроллер или родительский элемент элемента должен иметь контроллер.
Это все о обмене данными и связи между угловальными контроллерами. Друзья, которые заинтересованы в знании обмена данными в AngularJS, могут учиться вместе. Спасибо за поддержку Wulin.com.