angularjs - 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 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 一起使用的开箱即用的日期选择器。