152

私はAngularJSを学んでいます。My1Ctrlを使用する/ view1と、My2Ctrlを使用する/view2があるとします。これは、各ビューが独自のシンプルで異なるフォームを持つタブを使用してナビゲートできます。

ユーザーがview1を離れてから戻ったときに、 view1の形式で入力された値がリセットされないようにするにはどうすればよいですか？

つまり、 view1への2回目のアクセスで、モデルを残したときとまったく同じ状態を維持するにはどうすればよいでしょうか。

4

8 に答える 8

22

答えには少し遅れましたが、いくつかのベストプラクティスでフィドルを更新しました

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;
    }
}
于 2013-09-26T05:29:08.900 に答える
10

$rootScope は大きなグローバル変数であり、1 回限りのものや小さなアプリには適しています。モデルや動作をカプセル化する (場合によっては別の場所で再利用する) 場合は、サービスを使用します。OPが言及したGoogleグループの投稿に加えて、https://groups.google.com/d/topic/angular/eegk_lB6kVs/discussionも参照してください。

于 2012-10-18T18:23:23.577 に答える
6

私は同じ問題を抱えていました。

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

すべてのビューにコントローラーが1つしかありませんが、問題は質問と同じです。コントローラーは常にデータを更新します。この動作を回避するために、上記の人々が提案したことを行い、その目的のためにサービスを作成してから渡します次のようにコントローラーに:

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

これで、任意のビューから update 関数を呼び出し、値を渡し、モデルを更新できるようになりました。永続化データに html5 API を使用する必要はありません (これは私の場合であり、他の場合には html5 を使用する必要があるかもしれません)。 localstorage やその他のもののような API)。

于 2014-06-27T20:37:16.740 に答える