angularjs – 角度和混合jQuery UI

我有以下代码……

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

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

相关文章