부트 스트랩 내가 '

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입니다 각 초기화를 switchand. ng-checked="{{accessory.value}}"으로 시도했지만 아무 것도 변경되지 않았습니다. checked 또는 checked="checked"을 사용하면 문제가 없습니다. 조언이 있으십니까?

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

초기화 할 때 ng-checked 지시문이 JQuery 초기화 함수에서 누락되었습니다. 그래서 내가 제안하는 것은 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 물건을 떠났다!