JQuery DatePicker 在我的 AngularJS Partial 中不起作用

JQuery DatePicker is not working in my AngularJS Partial

本文关键字：Partial 不起作用 AngularJS 我的 DatePicker JQuery      更新时间：2023-09-26


我已经开始在 AngularJS 上工作，同时这样做我碰巧在我的一个输入字段中使用了日期。为此，我选择了Jquery日期选择器。但问题是当我独立使用 Jquery 日期选择器时它可以正常工作。即

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>jQuery UI Datepicker - Default functionality</title>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
   <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
   <script>
      $(function() {
         $( "#datepicker" ).datepicker();
      });
    </script>
 </head>
 <body> 
    <p>Date: <input type="text" id="datepicker"></p> 
 </body>
 </html>

但是当我在其中一个角度部分使用它时，它不起作用。我很困惑那里可能发生了什么。你能帮我吗？

除了

指令之外，Dom 操作不应该存在于 Angular 中的其他任何地方。您需要将日期选取器包装到指令中，因为角度运行$compile并将元素排除到 DOM 中。

下面是一个示例指令：

"use strict";
angular.module("App.directives").
directive("bootstrapDatepicker", function() {
    return {
        // Restrict it to be an attribute in this case
        restrict: "A", //<div bootstrap-datepicker></div>
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs) {
            $(element).datepicker();
            scope.$on("$destroy", function(){
                element.off();
            });
        }
    };
});

查看这些： 指令指南和这个

你应该尝试调用这个方法

$（function（） { $（ "#datepicker" ）.datepicker（）; }）;

加载部分后

相关文章：