我有以下代码……
<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.
然而,我一直在看到开发人员正在使用各种箍(主要是指令)的帖子,以使日期选择器在Angular中工作.
我在这里错过了什么吗?
像这样使用JQuery意味着你没有声明性地表达你的应用程序在HTML中的作用,这是Angular的一点.
从角度主页:
AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive,readable,and quick to develop.
你的代码也会遇到很多麻烦
$(document).ready(function() { $("#calendar").datepicker(); });
由于Angular不知道何时完成或改变了什么.如果你开始使用这样的东西,你需要深入了解Angular中的脏检查和摘要循环的工作方式.
您的日期选择器也不会与其他指令一起使用.例如,如果你把它放在ng-if中并隐藏并显示它,那么日期选择器将不再存在.
您是否查看了像Angular UI Bootstrap或Angular Strap这样的库.它们都提供了与Angular一起开箱即用的日期选择器.