Bootstrap switchand angular 初始化

Question

我遇到了 bootstrap switch 初始化问题

<span style="margin-right: 5px;">{{accessory.name}} </span> 
   <input   type="checkbox" name="accessory{{accessory.id}}"
       data-ng-model="accessory.value" data-ng-attr-id="{{accessory.id}}"
       data-ng-attr-topic="{{accessory.topic}}" bootstrap-switch>

ng-model 不初始化状态，它始终为 false。我什至尝试过 ng-checked="{{accessory.value}}" 但没有任何改变。如果我使用 checked 或 checked="checked" 一切正常。你有什么建议吗？

这是 bootstrap 开关的指令：

app.directive('bootstrapSwitch', 
        ['$http',
         function($http) {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function(scope, element, attrs, ngModel) {
                    element.bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                    //ngModel.$setViewValue(false); //set start status to false
                    element.on('switchChange.bootstrapSwitch', function(event, state) {
                        if (ngModel) {
                            scope.$apply(function() {
                                ngModel.$setViewValue(state);
                            });
                        }
                    });

                    scope.$watch(attrs.ngModel, function(newValue, oldValue) {
                        if (newValue!= oldValue){
                            $http({
                                method: 'PUT',
                                url: '/reservations/' + document.getElementById("hiddenIdReservation").value + '/accessories/'+ element[0].attributes.id.value,
                                params: {topic: element[0].attributes.topic.value, value: newValue}
                            }).then(function successCallback(response) {
                                if (typeof response.data.success == 'undefined'){
                                    window.location.href = "/500";
                                }else if (response.data.success==true){
                                    if (newValue) {
                                        element.bootstrapSwitch('state', true, true);
                                    } else {
                                        element.bootstrapSwitch('state', false, true);
                                    }
                                }else if (response.data.success==false)
                                    notifyMessage(response.data.result, 'error');
                            }, function errorCallback(response) {
                                window.location.href = "/500";
                            });
                        }
                    });
                }
            };
        }
        ]
);

ngModel.$setViewValue(false); 的注释值为真，但开关仍然处于关闭状态。

Answer 1

初始化时，JQuery 初始化函数错过了 ng-checked 指令。所以我的建议是将 ng-model 值更新为 switch.

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
  $scope.accessory = {
    name: "test",
    id: 1,
    value: "true",
    topic: 'test'
  };
  $scope.testing = true;
}).directive('bootstrapSwitch', ['$http',
  function($http) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        element.bootstrapSwitch({
          size: "small",
          onColor: "success",
          offColor: "danger"
        });
        element.on('switchChange.bootstrapSwitch', function(event, state) {
          if (ngModel) {
            scope.$apply(function() {
              ngModel.$setViewValue(state);
            });
          }
        });
        scope.$watch(ngModel, function(newValue, oldValue) {
          if (newValue) {
            element.bootstrapSwitch('state', true, true);
          } else {
            element.bootstrapSwitch('state', false, true);
          }
        });
      }
    }
  }
]);

这是一个相同的工作示例。

JSFiddle Demo

我省略了 scope.$watch 内容，因为它不是导致问题的原因！

Bootstrap switchand angular 初始化

Bootstrap switchand angular initialization

html

checkbox

angularjs

bootstrap-switch