无法使用angularjs重置$scope变量

Unable to reset a $scope variable with angularjs

本文关键字:scope 变量 重置 angularjs      更新时间:2023-09-26

我有一个工厂,它被注入到我的所有控制器中,用于初始化和存储状态。

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

每个控制器的启动看起来像这个

c2gdtp.js

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

这在不同的控制器中起着同样的作用。对$state.rental对象所做的每一次更改都通过不同的视图/控制器来保持。

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

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,我也有以前的旧值,尽管我单击了清除按钮。

clear()函数在指令中,因为这是清除按钮所在的位置。我已经尝试将clear函数复制到控制器中,得到了相同的结果。

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

edit@zeroflagL清洁的解决方案会是什么样子?我试过在工厂里设置clearRental功能:

编辑#2我的最终解决方案。制表符值必须保持不变,我不能再在工厂里把它从$scope中取出。现在它正在被传递。

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,

这将一个新对象分配给与state.rental没有关联的$scope.rental

angular.copy($scope.rental)

基本上什么都不做。您需要分配回更改:

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

当然,更干净的解决方案是使用控制器调用的state.clearRental方法。

编辑

至于更清洁的解决方案:

clearRental: function() {
    var now = new moment().startOf('hour').add(1, 'h');
    var rental = { ...};
    angular.copy(rental, this.rental);
$scope.clear = function() {
    state.clearRental();
};

您可以在指令中调用state:

angular.module('c2gyoApp')
  .directive('timeInputForm', ['state', function(state) {
    return {
      restrict: 'E',
      templateUrl: 'scripts/directives/timeInputForm.html',
      controller: function($scope) {
        ...
        $scope.clear = function() {
          var now = new moment().startOf('hour').add(1, 'h');
          state.rental = $scope.rental = {
            tab: $scope.rental.tab,
            startDate: now.clone(),
            endDate: now.clone(),
            distance: 0,
            timeMinutes: 0,
            timeHours: 0,
            timeDays: 0,
            timeWeeks: 0,
            timeStanding: 0,
            airport: false
          };
          angular.copy($scope.rental);
        };
      }
    };
  }]);