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

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

1 个答案: