bootstrap-switch与angularjs结合使用

bootstrap-switch和angularjs结合使用

由于angularjs的dom操作总是先执行，导致$(input[name="switch"])找不到元素，所以使用directive自定义指令，有两种方法:

html部分：

 <my-input power="{{x.power}}" did="{{x.id}}"></my-input>

directive指令部分：

1、通过插入元素的方法

app.directive('myInput',function(factoryName){
   return{
       restrict : "AE",
       scope : {
           power  :"@",
           did : "@"
       },
       template :'<div class="switch"></div>',
       replace : true,
       link : function(scope,element,attr){
           var $input = $('<input type="checkbox" name="switch" checked>');
           $(element[]).append($input);
           $(element[]).children().bootstrapSwitch({
               'size':'small',
               onSwitchChange : function(target,state){
                  //state是开关的状态
               }
           })
       }
   }
})

2、通过引入外部文件的方法

 return{
         template : '<div ng-include="getElement()"></div>',
         scope : {
             dtype : '@',
             id : '@'
         },
         replace : true,
         link : function(scope,element,attr){
             scope.getElement = function(){
                 if(attr.dtype == 3){
                     return 'testchecked.html';
                 }else{
                     return 'testunchecked.html';
                 }
             };
         }
     }

外部文件testchecked.html为

<div class="switch" data-on="info" data-off="success">
    <input type="checkbox" name="switch" checked/>
</div>
<script type="text/javascript">
    $("input[name='switch']").bootstrapSwitch({
        'size' : 'normal',
        'onColor':'info',
        'onSwitchChange':function(target,state){

        }
    })
</script>