<!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>AngularJS+bootstrap-switch 实现开关控件
原文地址：https://www.cnblogs.com/yeyongjian/p/8998157.html