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

标签 javascript jquery angularjs


我已经开始使用 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>

但是当我在其中一个 Angular 偏音中使用它时,它不起作用。我很困惑那里可能发生了什么。你能帮我解决这个问题吗?

最佳答案

Dom 操作不应该存在于除指令之外的 Angular 中的任何其他地方。您需要将日期选择器包装到一个指令中,因为 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();
            });
        }
    };
});

检查这些:directive guidethis

关于javascript - JQuery DatePicker 在我的 AngularJS Partial 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27898693/

相关文章:

javascript - 如何将json数据发送到codeigniter View

javascript - Angular : Why is my watch not firing?

javascript - angularjs View 在 Controller 完成之前加载

javascript - 无法读取 null 的属性 'appendChild' - Tiny Slider React

javascript - Javascript 对象中的变量方法

javascript - 如何从这些 JSON 对象中过滤掉值

php - 使用 jQuery 从 PHP 表单中选择文本输入

jquery - 滚动时逐行淡出或淡入文本

javascript - jquery addClass/removeClass 到基于 div 位置的导航链接

javascript - 检查一个函数是否在另一个函数被触发时被调用