javascript - 刷新作用域变量后 View 不刷新

Question

检查插件: Plunker

Controller :

appRoot.controller('IndexCtrl', function($scope, myService) {
  $scope.ToggleSwithchTrigglerCount = 0;
  $scope.ToggleSwitchWidgetConfig=myService.ToggleSwitchWidgetConfig;
  $scope.SwitchToggled = function() {
    $scope.ToggleSwithchTrigglerCount++;

    //since single click of the toggle switch triggers the two click events, 
    //In first call the check box state will be unchecked
    //In second call it will have the changed state
    //I am executing following code on second event since at that time check box will be in final state 
    if ($scope.ToggleSwithchTrigglerCount == 2) {

      $scope.CurrentSwithIndex = this.config.Index;

      //call the method from service
      myService.SwitchToggled($scope);

      //now get the updated config object in scope variable so that view can be updated
      $scope.ToggleSwitchWidgetConfig = myService.ToggleSwitchWidgetConfig;

    }

  };
});

服务:

appRoot.service('myService', function($rootScope) {
  var myTempService = {
    ToggleSwitchWidgetConfig: [
                { "State": "ON", "Index":1 },
                { "State": "ON", "Index": 2 },
                { "State": "ON", "Index": 3 },
                { "State": "ON", "Index": 4 },
                { "State": "OFF", "Index": 5 },
                { "State": "OFF", "Index": 6 } ],
    SwitchToggled: function($scope) {
    var index = $scope.CurrentSwithIndex;
      var cbId = 'visiblityToggleCB' + index;
      var state = '';
      if ($("#" + cbId).is(':checked'))
        state = 'ON';
      else {
        state = 'OFF';
      }

      this.ToggleSwitchWidgetConfig[+index - 1].State = state;
      var obj = this.ToggleSwitchWidgetConfig;

      var offCount = 0;
      var onCount = 0;
      $.each(obj, function(key, value) {
        if (value.State == 'OFF') {
          offCount++;
        } else if (value.State == 'ON') {
          onCount++;
        }
      });


      if (offCount == obj.length) {
        //If all switches are in OFF, 
        //switch back the current switch to ON state
        this.ToggleSwitchWidgetConfig[+index - 1].State = 'ON';
      }
      if (onCount == obj.length) {
        //If all switches are in ON state,
        //switch bact the current switch to OFF state
        this.ToggleSwitchWidgetConfig[+index - 1].State = 'OFF';
      }
    }
  };
  return myTempService;
});

指令:

appRoot.directive('toggleSwitchDirective', function() {
  return {
    restrict: "C",
    replace: true,
    templateUrl: "_ToggleSwitchWidget.html"
  }
});

该指令将呈现为:

现在我正在尝试做的事情，如果 6 个开关中有 5 个处于 隐藏 状态，并且如果我也尝试将第 6 个开关设置为 隐藏，那么应该防止这种情况发生当我尝试将所有开关切换到 显示 状态时，应该会发生类似的情况。

为此，我相应地更改了 $scope 变量ToggleSwitchWidget(用于填充开关)，但模型中的更改不会导致 View 中的更改。我错过了什么或者我做错了什么？

Answer 1

问题是，当代码到达此点时:

witchToggled: function() {
      var cbId = 'visiblityToggleCB' + index;

这个变量:

Index

不存在。

因此，我:

• 放置 ng-click="SwitchToggled(config)" 以传递单击的项目
• 在服务中检索它:var index = selected.Index;

还有另一个问题，为了关闭/打开最后一项，我必须放置 $timeout 以便强制在页面中渲染:

(function(input) {

    $timeout(function(){input.State = 'ON'},100);
})(this.ToggleSwitchWidgetConfig[index-1]);

这是更新后的工作 Plunker:http://plnkr.co/edit/fcOKiUpXJkZZdnoBpWBK?p=preview

注意:超时设置为 100 mill，以便提供点击某物的外观和感觉，然后将其恢复到之前的状态