无法使用 angularjs 重置 $scope 变量 [英] Unable to reset a $scope variable with angularjs

问题描述

我有一个工厂，它被注入到我的所有控制器中以初始化和存储状态.

I have a factory that is injected into all of my controllers to initialize and store the state.

state.js

angular.module('c2gyoApp')
  .factory('state', function() {

    var now = new moment().startOf('hour');

    return {
      rental: {
        tab: 'simple',
        startDate: now.clone().add(1, 'h'),
        endDate: now.clone().add(10, 'h'),
        distance: 10,
        timeMinutes: 0,
        timeHours: 10,
        timeDays: 0,
        timeWeeks: 0,
        timeStanding: 0,
        airport: false
      }
    };
  });

每个控制器的开头都是这样的

The start of every controller looks like this

c2gdtp.js

angular.module('c2gyoApp')
  .controller('C2gdtpCtrl', [
    '$scope',
    'c2gConfig',
    'duration',
    'state',
    function($scope, config, duration, state) {
      $scope.rental = state.rental;
      ...
    }
  ]);

这在不同控制器中的工作方式与预期相同.对 $state.rental 对象所做的每个更改都通过不同的视图/控制器进行保存.

This works just as intendend throughout the different controllers. Every change made to the $state.rental object is kept through different views/controllers.

我在每个控制器都使用的指令中实现了一个 clear() 函数:

I've implemented a clear() function in a directive that is used by every controller:

timeinputform.js

angular.module('c2gyoApp')
  .directive('timeInputForm', function() {
    return {
      restrict: 'E',
      templateUrl: 'scripts/directives/timeInputForm.html',
      controller: function($scope) {
        ...
        $scope.clear = function() {
          var now = new moment().startOf('hour').add(1, 'h');

          $scope.rental = {
            startDate: now.clone(),
            endDate: now.clone(),
            distance: 0,
            timeMinutes: 0,
            timeHours: 0,
            timeDays: 0,
            timeWeeks: 0,
            timeStanding: 0,
            airport: false
          };

          angular.copy($scope.rental);
        };

      }
    };
  });

问题是它不保存 $state.rental 对象的重置.例如，如果我在 view1/controller1 中单击清除按钮，则 $state.rental 对象将被重置.如果我切换到 view2/controller2，我将拥有与单击清除按钮之前相同的旧值.如果我再次转到 view1/controller1，虽然我点击了清除按钮，但我也有与之前相同的旧值.

Problem is it doesn't save the reset of the $state.rental object. For example, if I'm in view1/controller1 and click the clear button, the $state.rental object is reset. If I change onto view2/controller2 I have the same old values as before I clicked the clear button. If I then go again to view1/controller1, I also have the same old values from before, although I clicked the clear button.

clear() 函数在指令中，因为那是清除按钮所在的位置.我尝试将 clear 函数复制到控制器中，结果相同.

The clear() function is in the directive because that's where the clear button is located. I've tried copying the clear function into the controllers, with the same result.

我只想清除所有控制器的状态.这有什么诀窍?

I just want to clear the state throughout all the controllers. What's the trick for this?

edit @zeroflagL 一个干净的解决方案会是什么样子?我试过在工厂设置 clearRental 功能:

edit @zeroflagL How would a clean solution look like? I've tried setting up the clearRental function in the factory:

edit#2 我的最终解决方案.标签值必须保持不变，我不能再在工厂中将它从 $scope 中取出.现在它正在传递.

edit#2 My final solution. The tab value has to stay the same, and I couldn't take it out of the $scope anymore in the factory. Now it's being passed on.

state.js

angular.module('c2gyoApp')
  .factory('state', function() {

    var now = new moment().startOf('hour');

    var rental = {
      tab: 'simple',
      startDate: now.clone().add(1, 'h'),
      endDate: now.clone().add(10, 'h'),
      distance: 10,
      timeMinutes: 0,
      timeHours: 10,
      timeDays: 0,
      timeWeeks: 0,
      timeStanding: 0,
      airport: false
    };

    var clearRental = function(currenttab) {
      var now = new moment().startOf('hour').add(1, 'h');

      var rental = {
        tab: currenttab,
        startDate: now.clone(),
        endDate: now.clone(),
        distance: 0,
        timeMinutes: 0,
        timeHours: 0,
        timeDays: 0,
        timeWeeks: 0,
        timeStanding: 0,
        airport: false
      };

      angular.copy(rental, this.rental);
    };

    return {
      rental: rental,
      clearRental: clearRental
    };
  });

控制器:

c2gdtp.js

angular.module('c2gyoApp')
  .controller('SmdtpCtrl', [
    '$scope',
    'stadtmobilRates',
    'smConfig',
    'duration',
    'state',
    function($scope, stadtmobilRates, smConfig, duration, state) {
      $scope.rental = state.rental;
      $scope.clear = function() {
        state.clearRental($scope.rental.tab);
      };
      ...
    }
  ]);

推荐答案

$scope.rental = {
        tab: $scope.rental.tab,

这会为 $scope.rental 分配一个新对象，该对象与 state.rental 没有关联.

This assigns a new object to $scope.rental which has no association to state.rental.

angular.copy($scope.rental)

基本上什么都不做.您需要重新分配更改:

Does essentially nothing. You need to assign back the changes:

angular.copy($scope.rental, state.rental);

当然，更简洁的解决方案是拥有一个由控制器调用的 state.clearRental 方法.

The cleaner solution, of course, would be to have a state.clearRental method that is called by the controller.

编辑

至于更清洁的解决方案:

As for the cleaner solution:

clearRental: function() {
    var now = new moment().startOf('hour').add(1, 'h');

    var rental = { ...};
    angular.copy(rental, this.rental);

$scope.clear = function() {
    state.clearRental();
};

这篇关于无法使用 angularjs 重置 $scope 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！