将angularjs与jquery ui日期选择器交互

当调用datepicker-onSelect方法时，是否有任何方法可以运行angularjs脚本？

感谢

当然可以。您可以在控制器中实例化日期选择器。

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 	<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerModule">
<div ng-controller="DatePickerController">
<input id="dateField" />
</div>
</body>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
	angular.module('DatePickerModule', [])
		.controller('DatePickerController', function() {
			$('#dateField').datepicker();
		});
</script>
</html>

编辑：如果你想使用指令：

<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 	<link rel="stylesheet" href="jquery-ui.css">
</head>
<body ng-app="DatePickerApp">
	<div>
		<input id="dateField" myDirective />
	</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript">
	angular.module('DatePickerApp', [])
 		.directive('mydirective', function() {
  			return {
			    restrict: 'A',
			    link: function (scope, element, attrs) {
			        $(function(){
			            element.datepicker({
			                onSelect: function() {
			                    alert("Selected");
			                }
			            });
			        });
			    }
			} 
		});
	
</script>
</html>

相关内容

最新更新

热门标签：