Question

检查弹药： Plunker

控制器：

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

该指令将呈现为： enter image description here

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

为此，我正在相应地更改$ scope变量 ToggleSwitchWidget （用于填充开关），但模型中的更改不会导致视图中的更改。我错过了什么或我做错了什么？

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毫秒，以便给出被点击的内容的外观，然后将其置于之前的状态

刷新范围变量后，视图不会刷新

1 个答案: