角度更新和清除工厂变量 [英] Angular updating and clearing factory variables

问题描述

我正在创建一个单页应用程序，用户在其中搜索一个术语，结果保存在一个变量中，然后路由一个显示结果的新页面.我有这个功能，但是我希望在用户返回上一页时清除变量，最重要的是当用户注销时.这样做的正确方法是什么?我希望工厂为我想要的某些页面保存内容，并为我不想要的某些页面(例如主页"或注销")清除它们.

工厂:

angular.module('firstApp').factory('事实', 函数 () {无功服务 = {};var _information = '默认信息';service.setInformation = 函数(信息){_信息=信息；}service.getInformation = function(){返回_信息；}退货服务；});

控制器:

angular.module('firstApp').controller('InformationCtrl', function($scope, $http, $location, fact) {$scope.message = '你好';$scope.result = fact.getInformation();$scope.sub = 函数(形式){console.log($scope.name);$scope.submitted = true;$http.get('/wiki', {参数:{名称:$scope.name，}}).成功(功能(结果){console.log("成功！");$scope.result = 结果；fact.setInformation(结果)；$location.path('/信息显示');});;}});

路线

angular.module('firstApp').config(function ($routeProvider) {$routeProvider.when('/信息', {templateUrl: 'app/information/input.html',控制器:'信息控制'，认证:真}).when('/信息显示', {templateUrl: 'app/information/results.html',控制器:'信息控制'，认证:真});});

input.html

<div class="col-md-6 col-md-offset-3 text-center"><p>{{result}}</p><form class="form" name="form" ng-submit="sub(form)" novalidate><input type="text" name="name" placeholder="Name" class="form-control" ng-model="name"></br><button class="btn btn-success" type="submit" class="btn btn-info">检查</button>

结果.html

<div ng-include="'components/navbar/navbar.html'"></div><div class="row"><div class="col-sm-4 col-sm-offset-4"><h2>信息结果</h2><p>{{result}}</p>

解决方案

如果您希望它在更改路由时擦除该值(我假设注销也应该更改路由)，您可以观看 $routeChangeStart 事件并有它在发生时擦除该值.你把这个函数放在 module.run 块中:

app.run(function ($rootScope, fact) {$rootScope.$on("$routeChangeStart",function(event, next, current){事实.setInformation(null);});});

I'm creating a single page app in which a user searches for a term, the result gets saved in a variable, and a new page is routed that displays the result. I have this functionality working, however I want the variable to be cleared when the user returns to the previous page and most importantly when the user logs out. What's the proper way to do this? I want the factory to save things for certain pages that I want, and clear them for certain pages I don't want like "home" or "logout".

Factory:

angular.module('firstApp')
    .factory('fact', function () {
    var service = {};
    var _information = 'Default Info';

    service.setInformation = function(info){
      _information = info;
    }

    service.getInformation = function(){
      return _information;
    }
    return service;
});

Controller:

angular.module('firstApp')
    .controller('InformationCtrl', function($scope, $http, $location, fact) {
        $scope.message = 'Hello';
        $scope.result = fact.getInformation();
        $scope.sub = function(form) {
            console.log($scope.name);
            $scope.submitted = true;
            $http.get('/wiki', {
                params: {
                    name: $scope.name,
                }
            }).success(function(result) {
                console.log("success!");
                $scope.result = result;
                    fact.setInformation(result);
                $location.path('/informationdisplay');
            });;
        }
    });

Routes

angular.module('firstApp')
  .config(function ($routeProvider) {
    $routeProvider
      .when('/information', {
        templateUrl: 'app/information/input.html',
        controller: 'InformationCtrl',
        authenticate : true
      })
        .when('/informationdisplay', {
        templateUrl: 'app/information/results.html',
        controller: 'InformationCtrl',
        authenticate : true
      });
  });

input.html

<div class="row">
    <div class="col-md-6 col-md-offset-3 text-center">
         <p>{{result}}</p>
         <form class="form" name="form" ng-submit="sub(form)" novalidate>
            <input type="text" name="name" placeholder="Name" class="form-control" ng-model="name">
            </br>
            <button class="btn btn-success" type="submit" class="btn btn-info">Check</button>
    </div>
</div>

results.html

<div ng-include="'components/navbar/navbar.html'"></div>
<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
            <h2>Information Results</h2>
            <p>{{result}}</p>   
    </div>
  </div>
</div>

解决方案

If you want it to wipe the value when they change routes (which logout should change routes also, I assume), you can watch the $routeChangeStart event and have it wipe the value whenever it occurs. You put that function in the module.run block:

app.run(function ($rootScope, fact) { 
    $rootScope.$on("$routeChangeStart",function(event, next, current){
        fact.setInformation(null);
    });
});

这篇关于角度更新和清除工厂变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！