Підтримуйте модель сфери застосування при переході між поглядами в AngularJS

Я навчаюсь AngularJS. Скажімо, у мене є / view1 за допомогою My1Ctrl , і / view2 за допомогою My2Ctrl ; які можна перейти до використання вкладок, де кожен вид має свою просту, але різну форму.

Як би я переконався, що значення, введені у вигляді view1 , не будуть скинуті, коли користувач залишає і повертається до view1 ?

Що я маю на увазі, як другий візит до view1 може підтримувати такий самий стан моделі, як я залишив її?

У мене було небагато часу, щоб розібратися, який найкращий спосіб зробити це. Я також хотів зберегти стан, коли користувач залишає сторінку та натискає кнопку назад, щоб повернутися до старої сторінки; а не просто вносити всі мої дані в кореневу зону .

Кінцевим результатом є надання сервісу для кожного контролера . У контролері у вас просто є функції та змінні, про які ви не дбаєте, якщо вони будуть очищені.

Служба для контролера вводиться шляхом введення залежності. Оскільки служби є одинаковими, їх дані не знищуються, як дані в контролері.

У сервісі у мене є модель. модель САМО має дані - немає функцій -. Таким чином він може бути перетворений назад і назад від JSON, щоб зберегти його. Я використовував html5 localstorage для наполегливості.

Нарешті, я використав window.onbeforeunloadі $rootScope.$broadcast('saveState');дав всім службам знати, що вони повинні зберегти свій стан, і $rootScope.$broadcast('restoreState')повідомити їм про відновлення свого стану (використовується для того, коли користувач залишає сторінку та натискає кнопку назад, щоб повернутися на сторінку відповідно).

Приклад служби під назвою userService для мого користувачаController :

app.factory('userService', ['$rootScope', function ($rootScope) {

    var service = {

        model: {
            name: '',
            email: ''
        },

        SaveState: function () {
            sessionStorage.userService = angular.toJson(service.model);
        },

        RestoreState: function () {
            service.model = angular.fromJson(sessionStorage.userService);
        }
    }

    $rootScope.$on("savestate", service.SaveState);
    $rootScope.$on("restorestate", service.RestoreState);

    return service;
}]);

UserController приклад

function userCtrl($scope, userService) {
    $scope.user = userService;
}

Тоді представлення використовує прив'язку, як це

<h1>{{user.model.name}}</h1>

А в модулі додатка , в функції запуску я обробляти мовлення в saveState і restoreState

$rootScope.$on("$routeChangeStart", function (event, next, current) {
    if (sessionStorage.restorestate == "true") {
        $rootScope.$broadcast('restorestate'); //let everything know we need to restore state
        sessionStorage.restorestate = false;
    }
});

//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
    $rootScope.$broadcast('savestate');
};

Як я вже згадував, пройшов деякий час, щоб дійти до цього пункту. Це дуже чистий спосіб зробити це, але це справедливо трохи техніки, щоб зробити щось, про що я б підозрював, є дуже поширеною проблемою при розробці в Angular.

Мені б хотілося бачити простіше, але як чіткі способи обробки стану у контролерах, у тому числі, коли користувач залишає та повертається на сторінку.

Трохи запізнився на відповідь, але щойно оновлений загадку з найкращими практиками

jsfiddle

var myApp = angular.module('myApp',[]);
myApp.factory('UserService', function() {
    var userService = {};

    userService.name = "HI Atul";

    userService.ChangeName = function (value) {

       userService.name = value;
    };

    return userService;
});

function MyCtrl($scope, UserService) {
    $scope.name = UserService.name;
    $scope.updatedname="";
    $scope.changeName=function(data){
        $scope.updateServiceName(data);
    }
    $scope.updateServiceName = function(name){
        UserService.ChangeName(name);
        $scope.name = UserService.name;
    }
}

$ rootScope - велика глобальна змінна, яка добре підходить для разових речей або невеликих додатків. Скористайтеся послугою, якщо ви хочете інкапсулювати свою модель та / або поведінку (а можливо, повторно використовувати її в іншому місці). Крім публікації згаданої ОП у групі Google, див. Також https://groups.google.com/d/topic/angular/eegk_lB6kVs/discussion .

Кутовий насправді не забезпечує те, що ви шукаєте, поза коробкою. Що я б зробив, щоб виконати те, що ти шукаєш, це використовувати наступні додатки

Маршрутизатор та додатковий інтерфейс маршрутизатора

Ці два нададуть вам маршрутизацію та липкі стани, ви можете вкладати вкладки між станами, і вся інформація буде збережена, оскільки сфера "залишається живою", так би мовити.

Перевірте документацію обох, оскільки це досить прямо вперед, додаткові інтерфейси маршрутизатора також добре демонструють, як працюють липкі стани.

У мене була така ж проблема. Це те, що я зробив: у мене є SPA з декількома переглядами на одній сторінці (без ajax), так це код модуля:

var app = angular.module('otisApp', ['chieffancypants.loadingBar', 'ngRoute']);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider.when('/:page', {
        templateUrl: function(page){return page.page + '.html';},
        controller:'otisCtrl'
    })
    .otherwise({redirectTo:'/otis'});
}]);

У мене є лише один контролер для всіх поглядів, але проблема така ж, як і питання, контролер завжди оновлює дані, щоб уникнути такої поведінки, я зробив те, що пропонують люди вище, і я створив службу для цієї мети, а потім передаю її до контролера наступним чином:

app.factory('otisService', function($http){
    var service = {            
        answers:[],
        ...

    }        
    return service;
});

app.controller('otisCtrl', ['$scope', '$window', 'otisService', '$routeParams',  
function($scope, $window, otisService, $routeParams){        
    $scope.message = "Hello from page: " + $routeParams.page;
    $scope.update = function(answer){
        otisService.answers.push(answers);
    };
    ...
}]);

Тепер я можу викликати функцію оновлення з будь-якого з моїх поглядів, передавати значення та оновлювати свою модель, мені не потрібно було використовувати html5 apis для збереження даних (це в моєму випадку, можливо, в інших випадках знадобиться використання html5 apis, як локальне зберігання та інші речі).

Альтернативою послугам є використання сховища цінностей.

У базі свого додатка я додав це

var agentApp = angular.module('rbAgent', ['ui.router', 'rbApp.tryGoal', 'rbApp.tryGoal.service', 'ui.bootstrap']);

agentApp.value('agentMemory',
    {
        contextId: '',
        sessionId: ''
    }
);
...

І тоді в своєму контролері я просто посилаюсь на зберігання цінностей. Я не думаю, що це має значення, якщо користувач закриває браузер.

angular.module('rbAgent')
.controller('AgentGoalListController', ['agentMemory', '$scope', '$rootScope', 'config', '$state', function(agentMemory, $scope, $rootScope, config, $state){

$scope.config = config;
$scope.contextId = agentMemory.contextId;
...

Рішення, яке буде працювати для декількох областей та декількох змінних в межах цих областей

Ця послуга базувалася на відповіді Антона, але є більш розширюваною і працюватиме в декількох сферах дії та дозволяє вибирати декілька змінних областей у тому ж обсязі. Він використовує шлях маршруту для індексації кожного діапазону, а потім імена змінної області, щоб індексувати один рівень глибше.

Створіть послугу з цим кодом:

angular.module('restoreScope', []).factory('restoreScope', ['$rootScope', '$route', function ($rootScope, $route) {

    var getOrRegisterScopeVariable = function (scope, name, defaultValue, storedScope) {
        if (storedScope[name] == null) {
            storedScope[name] = defaultValue;
        }
        scope[name] = storedScope[name];
    }

    var service = {

        GetOrRegisterScopeVariables: function (names, defaultValues) {
            var scope = $route.current.locals.$scope;
            var storedBaseScope = angular.fromJson(sessionStorage.restoreScope);
            if (storedBaseScope == null) {
                storedBaseScope = {};
            }
            // stored scope is indexed by route name
            var storedScope = storedBaseScope[$route.current.$$route.originalPath];
            if (storedScope == null) {
                storedScope = {};
            }
            if (typeof names === "string") {
                getOrRegisterScopeVariable(scope, names, defaultValues, storedScope);
            } else if (Array.isArray(names)) {
                angular.forEach(names, function (name, i) {
                    getOrRegisterScopeVariable(scope, name, defaultValues[i], storedScope);
                });
            } else {
                console.error("First argument to GetOrRegisterScopeVariables is not a string or array");
            }
            // save stored scope back off
            storedBaseScope[$route.current.$$route.originalPath] = storedScope;
            sessionStorage.restoreScope = angular.toJson(storedBaseScope);
        },

        SaveState: function () {
            // get current scope
            var scope = $route.current.locals.$scope;
            var storedBaseScope = angular.fromJson(sessionStorage.restoreScope);

            // save off scope based on registered indexes
            angular.forEach(storedBaseScope[$route.current.$$route.originalPath], function (item, i) {
                storedBaseScope[$route.current.$$route.originalPath][i] = scope[i];
            });

            sessionStorage.restoreScope = angular.toJson(storedBaseScope);
        }
    }

    $rootScope.$on("savestate", service.SaveState);

    return service;
}]);

Додайте цей код до функції запуску у модулі додатка:

$rootScope.$on('$locationChangeStart', function (event, next, current) {
    $rootScope.$broadcast('savestate');
});

window.onbeforeunload = function (event) {
    $rootScope.$broadcast('savestate');
};

Вставте службу RestoScope у свій контролер (приклад нижче):

function My1Ctrl($scope, restoreScope) {
    restoreScope.GetOrRegisterScopeVariables([
         // scope variable name(s)
        'user',
        'anotherUser'
    ],[
        // default value(s)
        { name: 'user name', email: 'user@website.com' },
        { name: 'another user name', email: 'anotherUser@website.com' }
    ]);
}

Наведений вище приклад ініціалізує $ range.user до збереженого значення, інакше буде за замовчуванням задане значення та збереже це. Якщо сторінку закрити, оновити або змінити маршрут, поточні значення всіх зареєстрованих змінних областей будуть збережені та будуть відновлені наступного разу, коли маршрут / сторінку буде відвідуватися.

Ви можете використовувати $locationChangeStartподію, щоб зберігати попереднє значення в $rootScopeслужбі або в ній. Повернувшись, просто ініціалізуйте всі раніше збережені значення. Ось швидке використання демонстрації $rootScope.

var app = angular.module("myApp", ["ngRoute"]);
app.controller("tab1Ctrl", function($scope, $rootScope) {
    if ($rootScope.savedScopes) {
        for (key in $rootScope.savedScopes) {
            $scope[key] = $rootScope.savedScopes[key];
        }
    }
    $scope.$on('$locationChangeStart', function(event, next, current) {
        $rootScope.savedScopes = {
            name: $scope.name,
            age: $scope.age
        };
    });
});
app.controller("tab2Ctrl", function($scope) {
    $scope.language = "English";
});
app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
            template: "<h2>Tab1 content</h2>Name: <input ng-model='name'/><br/><br/>Age: <input type='number' ng-model='age' /><h4 style='color: red'>Fill the details and click on Tab2</h4>",
            controller: "tab1Ctrl"
        })
        .when("/tab2", {
            template: "<h2>Tab2 content</h2> My language: {{language}}<h4 style='color: red'>Now go back to Tab1</h4>",
            controller: "tab2Ctrl"
        });
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
    <a href="#/!">Tab1</a>
    <a href="#!tab2">Tab2</a>
    <div ng-view></div>
</body>
</html>