รักษาโมเดลขอบเขตเมื่อเปลี่ยนระหว่างมุมมองใน AngularJS

ฉันกำลังเรียนรู้ AngularJS สมมติว่าฉันมี/ view1ใช้My1Ctrlและ/ view2ใช้My2Ctrl ; ที่สามารถนำทางไปยังการใช้แท็บที่แต่ละมุมมองมีรูปแบบที่เรียบง่าย แต่แตกต่างกัน

ฉันจะให้แน่ใจว่าค่าที่ป้อนในรูปแบบของView1ยังไม่ได้ตั้งค่าใหม่เมื่อใบใช้แล้วกลับไปView1 ?

สิ่งที่ผมหมายถึงคือวิธีการที่สองจะสามารถView1ให้รัฐเดียวกันของรูปแบบที่แน่นอนตามที่ผมออกจากมันได้หรือไม่

ฉันใช้เวลาซักนิดเพื่อหาวิธีที่ดีที่สุดในการทำสิ่งนี้ ฉันต้องการรักษาสถานะเมื่อผู้ใช้ออกจากหน้าแล้วกดปุ่มย้อนกลับเพื่อกลับไปที่หน้าเก่า และไม่เพียง แต่นำข้อมูลทั้งหมดของฉันเข้าไปในrootscope

ผลสุดท้ายคือการมีบริการสำหรับแต่ละตัวควบคุม ในคอนโทรลเลอร์คุณเพียงแค่มีฟังก์ชั่นและตัวแปรที่คุณไม่สนใจถ้ามันถูกล้าง

บริการสำหรับตัวควบคุมถูกฉีดโดยการฉีดพึ่งพา เนื่องจากบริการเป็นแบบซิงเกิลข้อมูลของพวกเขาจะไม่ถูกทำลายเหมือนกับข้อมูลในคอนโทรลเลอร์

ในบริการฉันมีรูปแบบ โมเดลมีข้อมูลเท่านั้น - ไม่มีฟังก์ชั่น - ด้วยวิธีนี้สามารถแปลงไปมาจาก JSON เพื่อคงอยู่ ฉันใช้ hststorage html5 สำหรับการติดตา

สุดท้ายที่ฉันใช้window.onbeforeunloadและ$rootScope.$broadcast('saveState');เพื่อให้บริการทั้งหมดรู้ว่าพวกเขาควรบันทึกสถานะของพวกเขาและ$rootScope.$broadcast('restoreState')เพื่อให้พวกเขารู้ว่าจะเรียกคืนสถานะของพวกเขา (ใช้เมื่อผู้ใช้ออกจากหน้าและกดปุ่มย้อนกลับเพื่อกลับไปที่หน้าตามลำดับ)

บริการตัวอย่างเรียกว่าuserServiceสำหรับฉันuserController :

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 OP ดังกล่าวเห็นhttps://groups.google.com/d/topic/angular/eegk_lB6kVs/discussion

เชิงมุมไม่ได้ให้สิ่งที่คุณต้องการอย่างแท้จริง สิ่งที่ฉันจะทำเพื่อให้บรรลุสิ่งที่คุณหลังจากนั้นใช้ส่วนเสริมต่อไปนี้

เราเตอร์ UIและอุปกรณ์เสริมเราเตอร์ UI

ทั้งสองนี้จะให้คุณกำหนดเส้นทางตามสถานะและสถานะเหนียวคุณสามารถแท็บระหว่างรัฐและข้อมูลทั้งหมดจะถูกบันทึกเป็นขอบเขต "อยู่รอด" เพื่อพูด

ตรวจสอบเอกสารเกี่ยวกับทั้งคู่เนื่องจากตรงไปตรงมา ui พิเศษของเราเตอร์ ui ยังมีการสาธิตที่ดีเกี่ยวกับการทำงานของสถานะติดหนึบ

ฉันมีปัญหาเดียวกันนี่คือสิ่งที่ฉันทำ: ฉันมีสปาที่มีหลายมุมมองในหน้าเดียวกัน (ไม่มีอาแจ็กซ์) ดังนั้นนี่คือรหัสของโมดูล:

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 เช่น localstorage และอื่น ๆ )

อีกทางเลือกหนึ่งสำหรับบริการคือการใช้ที่เก็บค่า

ที่ฐานของแอพของฉันฉันเพิ่มสิ่งนี้

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;
...

โซลูชันที่จะทำงานกับหลาย ๆ ขอบเขตและหลายตัวแปรภายในขอบเขตเหล่านั้น

บริการนี้มีพื้นฐานมาจากคำตอบของ Anton แต่สามารถขยายได้มากขึ้นและสามารถทำงานได้ในหลาย ๆ ขอบเขตและอนุญาตให้เลือกตัวแปรขอบเขตหลายตัวในขอบเขตเดียวกัน มันใช้เส้นทางเส้นทางเพื่อจัดทำดัชนีแต่ละขอบเขตจากนั้นชื่อตัวแปรขอบเขตเพื่อทำดัชนีให้ลึกลงหนึ่งระดับ

สร้างบริการด้วยรหัสนี้:

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');
};

ฉีดบริการ restoreScope เข้าไปในคอนโทรลเลอร์ของคุณ (ตัวอย่างด้านล่าง):

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' }
    ]);
}

ตัวอย่างข้างต้นจะเริ่มต้น $ scope.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>