javascript - w3schools - AngularJS মধ্যে মতামত মধ্যে পরিবর্তন যখন সুযোগ মডেল বজায় রাখা




angularjs tutorial (6)

আমি AngularJS শিখছি। বলুন আমার My1Ctrl ব্যবহার করে / view1 আছে এবং My2Ctrl ব্যবহার করে / view2 ; যেগুলি ট্যাবগুলি ব্যবহার করতে নেভিগেট করা যেতে পারে যেখানে প্রতিটি দর্শনটির নিজস্ব নিজস্ব, কিন্তু বিভিন্ন ফর্ম রয়েছে।

আমি কীভাবে নিশ্চিত করব যে view1 রূপে প্রবেশ করা মানগুলি রিসেট হয় না, যখন কোন ব্যবহারকারী ছেড়ে যায় এবং তারপরে 1 টি দেখতে আসে?

আমি কি বলতে চাচ্ছি, দ্বিতীয় দর্শন দেখার জন্য কিভাবে 1 মডেলের ঠিক একই অবস্থা রাখতে পারি?


$ rootScope একটি বৃহত বিশ্বব্যাপী পরিবর্তনশীল, যা এক বন্ধ জিনিসগুলির জন্য বা ছোট অ্যাপ্লিকেশানগুলির জন্য সূক্ষ্ম। আপনি যদি আপনার মডেল এবং / অথবা আচরণ (এবং সম্ভবত এটি অন্যত্র পুনঃব্যবহার) করতে চান তবে একটি পরিষেবা ব্যবহার করুন। ওপি উল্লিখিত গুগল গ্রুপ ছাড়াও https://groups.google.com/d/topic/angular/eegk_lB6kVs/discussion


আমারও একই সমস্যা ছিল, আমি যা করেছি তা হল: আমার একই পৃষ্ঠায় একাধিক মতামত রয়েছে (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)।


একটি উত্তর জন্য বিট দেরী কিন্তু কিছু ভাল অনুশীলন সঙ্গে শুধু খামখেয়াল আপডেট

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

কৌণিক সত্যিই আপনি বক্স খুঁজে খুঁজছেন কি প্রদান করে না। আপনি যা পরেছেন তা সম্পাদন করার জন্য আমি কী করব তা নিম্নোক্ত Add Ons ব্যবহার করে

UI রাউটার এবং UI রাউটার এক্সট্রা

এই দুইটি আপনাকে রাষ্ট্র ভিত্তিক রাউটিং এবং চটচটে অবস্থায় সরবরাহ করবে, আপনি রাজ্যের মধ্যে ট্যাব এবং সমস্ত তথ্যকে "জীবিত থাকতে" হিসাবে সংরক্ষণ করতে পারবেন।

এটি বেশ সোজা উভয় হিসাবে ডকুমেন্টেশন চেক করুন, ui রাউটার অতিরিক্ত এছাড়াও স্টিকি রাজ্যের কাজ কিভাবে একটি ভাল demonstration


$rootScope বা একটি পরিষেবাতে পূর্ববর্তী মান সংরক্ষণ করতে আপনি $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>


সমাধান যে scopes মধ্যে একাধিক scopes এবং একাধিক ভেরিয়েবল জন্য কাজ করবে

এই সেবাটি 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: '[email protected]' },
        { name: 'another user name', email: '[email protected]' }
    ]);
}

উপরের উদাহরণটি $ scope.user সঞ্চিত মানতে শুরু করবে, অন্যথায় প্রদত্ত মানটি ডিফল্ট হবে এবং সেটি সংরক্ষণ করবে। পৃষ্ঠাটি বন্ধ থাকলে, রিফ্রেশ করা বা রুট পরিবর্তিত হলে, সমস্ত নিবন্ধিত স্কোপ ভেরিয়েবলের বর্তমান মানগুলি সংরক্ষণ করা হবে এবং পরের বার রুট / পৃষ্ঠা পরিদর্শন করা হবে।





angularjs