AngularJS - общее состояние между контроллерами?

Я знаю, что есть другие подобные вопросы о том, как передавать данные между контроллерами Angular.

Интересно, как с этим справиться в представлении.

Допустим, у меня есть UserController для входа, регистрации и т.д. И AppController для фактической функциональности приложения.

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

Предположим, что приложение должно скрывать/показывать материал в зависимости от того, зарегистрирован ли пользователь или нет. Или это может быть, если пользователь мужчина или женщина и т.д.

Должна ли модель приложения сохранять свою собственную копию состояния модели пользователя? например appModel.isLoggedIn, appModel.gender и т.д.

чувствует себя немного избыточным, но в то же время более проверяемым.

Ответы

Ответ 1

Короткий ответ

Создайте службу, см. Создание служб для деталей.

Длинный ответ

Услуги - это индивидуальные сингллеты, основанные на приложениях, поэтому они идеально подходят для хранения состояния через представления, контроллеры и соавторы:

app.factory('myService', [ function () {
  'use strict';
  return {
    // Your service implementation goes here ...
  };
}]);

Как только вы написали и зарегистрировали свою услугу, вы можете потребовать ее в своих контроллерах с использованием функции встраивания зависимостей AngularJS:

app.controller('myController', [ 'myService', '$scope',
  function (myService, $scope) {
  'use strict';
  // Your controller implementation goes here ...
}]);

Теперь внутри вашего контроллера есть переменная myService, которая содержит единственный экземпляр службы. Там вы можете иметь свойство isLoggedIn, которое представляет, зарегистрирован ли ваш пользователь или нет.

Ответ 2

Чтобы дополнительно указать ответ @GoloRoden, это пример того, как вы можете делиться значениями состояния для всех контроллеров, принимающих службу в качестве зависимости.

App.factory('formState', formState);

function formState() {        

    var state = {};

    var builder = "nope";
    var search = "nope";

    state.builder = function () {
        return builder;
    };

    state.search = function () {
        return search;
    };

    state.set = {
        'builder': function (val) {
            builder = val;
        },
        'search': function (val) {
            search = val;
        }
    };

    return {
        getStateManager: function () {
            return state;
        }
    };
}

App.controller('builderCtrl', builderCtrl);

builderCtrl.$inject = ['formState']
function builderCtrl(formState) {
    var stateManager = formState.getStateManager();

    activate();

    function activate() {
        console.log("setting val in builder");
        stateManager.set.search("yeah, builder!");

        console.log("reading search in builder: " + stateManager.search());
        console.log("reading builder in builder: " + stateManager.builder());
    }
}

App.controller('searchCtrl', searchCtrl);

searchCtrl.$inject = ['formState']
function searchCtrl(formState) {
    var stateManager = formState.getStateManager();

    activate();

    function activate() {
        console.log("setting val in search");
        stateManager.set.search("yeah, search!");

        console.log("reading search in search: " + stateManager.search());
        console.log("reading builder in search: " + stateManager.builder());
    }
}