Angular 和混合 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>

此代码看起来运行良好。正在调用更改事件并正确显示新的 selectedDate。

但我不断看到开发人员使用各种箍（主要是指令）来让日期选择器在 Angular 中工作的帖子。

我错过了什么吗？

Answer 1

像这样使用 JQuery 意味着您不会在 HTML 中以声明方式表达您的应用程序所做的事情，而这正是 Angular 的重点。

来自 Angular 主页：

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

你也会在使用类似

的代码的道路上遇到很多麻烦

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

因为 Angular 不知道这何时完成或发生了什么变化。如果您开始使用这样的东西，您将需要深入了解 Angular 中的脏检查和摘要循环是如何工作的。

您的日期选择器也无法与其他指令配合使用。例如，如果您将其放入 ng-if 并隐藏并显示它，那么日期选择器将不再存在。

您是否查看过 Angular UI Bootstrap 或 Angular Strap 之类的库。它们都提供开箱即用的 Angular 日期选择器。