角度和混合jQuery UI - 为什么不呢？

Question

我有以下代码......

<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中工作.

我在这里错过了什么吗？

Answer 1

像这样使用JQuery意味着你没有声明性地表达你的应用程序在HTML中的作用,这是Angular的一点.

从角度主页:

AngularJS允许您为应用程序扩展HTML词汇表.由此产生的环境非常具有表现力,可读性和快速开发.

你的代码也会遇到很多麻烦

$(document).ready(function() { $("#calendar").datepicker(); });

正如Angular不知道何时完成或改变了什么.如果你开始使用这样的东西,你需要深入了解Angular中的脏检查和摘要循环的工作方式.

您的日期选择器也不会与其他指令一起使用.例如,如果您将其放入ng-if并隐藏并显示它,则日期选择器将不再存在.

你有没有看过像Angular UI Bootstrap或Angular Strap这样的库.它们都提供了与Angular一起开箱即用的日期选择器.