ブートストラップは、角の初期化に

Question

をswitchand私は「VEの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との問題は、それが常に偽で、ステータスを初期化しません。 ng-checked="{{accessory.value}}"でも試しましたが、何も変更されていません。 checkedまたはchecked="checked"を使用すると問題なく動作します。 アドバイスをお持ちですか？

これは、ブートストラップスイッチのためのディレクティブです：ngModel.$setViewValue(false);値のコメントと

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

は本当ですが、スイッチがオフに残っています。

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のものを残してきました！