我有以下代码…
<div ng-controller="CalendarCtrl"> <input type="text" ng-model="model.selectedDate" ng-change="onCalendarChange()" id="calendar" /> </div> <script> var app = angular.module("myApp", []); app.controller("CalendarCtrl", function($scope) { var currentDate = new Date(); $scope.model = { selectedDate: (currentDate.getMonth() + 1) + "/" + currentDate.getDay() + "/" + currentDate.getFullYear() }; console.log($scope.model); $scope.onCalendarChange = function() { console.log(currentDate); }; }); $(document).ready(function() { $("#calendar").datepicker(); }); </script>
这段代码看起来很漂亮。正在调用change事件,并且正确显示了新的selectedDate。
但是我仍然看到帖子,其中开发人员正在使用各种箍(主要是指令)来使datepicker在Angular中工作。
我在这里想念什么吗?
像这样使用JQuery意味着您没有在Angular中以声明方式表示应用程序在HTML中的功能。
从角度首页:
AngularJS允许您扩展应用程序的HTML词汇。由此产生的环境具有极强的表现力,可读性,并且可以快速开发。
您还将在代码中遇到很多麻烦,例如
$(document).ready(function() { $("#calendar").datepicker(); });
由于Angular不知道何时完成或更改了什么。如果您开始使用这样的东西,您将需要对Angular中的脏检查和摘要循环如何工作有深入的了解。
您的日期选择器也无法与其他指令配合使用。例如,如果将其放在中ng-if并隐藏并显示,则日期选择器将不再存在。
ng-if
您是否研究过Angular UI Bootstrap或Angular Strap之类的库?它们都提供了与Angular兼容的日期选择器。