无法使用 angularjs 重置 $scope 变量

Question

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

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 对象所做的每个更改都保存在不同的 views/controllers.

中

我在每个控制器都使用的指令中实现了一个 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 功能：

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

Answer 1

您可以在指令中调用状态：

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

      }
    };
  }]);

Answer 2

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

这会将一个新对象分配给 $scope.rental，它与 state.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();
};

无法使用 angularjs 重置 $scope 变量

Unable to reset a $scope variable with angularjs

javascript

angularjs

yeoman