<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/bootstrap-switch.min.css"> <link rel="stylesheet" type="text/css" href="./libs/bootstrap/css/style.css"> </head> <body ng-app="myapp" > <!-- demo --> <div ng-controller="myctra"> <button type="button" ng-click = "test()" >biggg</button> <!-- 控件 --> <!-- <my-input model="x" fun = "sub"></my-input> --> <input type="checkbox" name="switch" checked/> </div> <script type="text/javascript" src="./libs/angular.min.js"></script> <script type="text/javascript" src="./libs/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="./libs/bootstrap/js/bootstrap-switch.min.js"</script> <script type="text/javascript" src="./libs/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript"> var appModule = angular.module('myapp', []); appModule.controller('myctra',['$scope',function($scope){ $scope.persons = ['wo','你','他']; $scope.x = true; $scope.test = function(){ console.log($scope.x); }; $scope.sub = function(state){ console.log(state); }; var c = $("[name='switch']"); c.bootstrapSwitch('state', $scope.x); // true || false c.on('switchChange.bootstrapSwitch', function(event, state) { $scope.sub(state); // true | false }); }]); //控件 appModule.directive('myInput',function(){ return{ restrict : "E", scope : { model :"=", fun :"=" }, template :'<div class="switch"></div>', replace : true, link : function(scope,element,attr){ var $input = $('<input type="checkbox" name="switch" checked>'); $(element[0]).append($input); var c = $(element[0]).children(); c.bootstrapSwitch('state', scope.model); // true || false c.on('switchChange.bootstrapSwitch', function(event, state) { scope.fun(state); }); } } }); </script> </body> </html>