javascript - 想在 Angular 中实现 jquery-ui-daterangepicker

Question

嗨， friend ，我想在我的应用程序中使用 jquery ui datepicker 插件我正在使用 http://tamble.github.io/jquery-ui-daterangepicker/这个插件并想要相同的功能而无需任何更改我已经尝试过类似下面的代码

(function(){
angular.module('publisher-portal').directive('dateRangePicker', function () {
    return {
         restrict : 'A',
         require: 'ngModel',
         link : function (scope, element, attr, ngModel) {

            element.daterangepicker();
         }
    };
});
})();
<input id="e2" type="text" ng-model="mydate" dateRangePicker/>  

请给我一些解决方案

Answer 1

这是一个工作片段(仔细查看我如何确保在调用 .daterangepiker 之前加载 jQuery

更多的人认为你在途中错过了

1. 安装模块后忘记放入空数组 app.module('publisher-portal',[])
2. 你没有在 $() 语句中扭曲元素

(function($){
angular.module('publisher-portal',[]).directive('dateRangePicker', function () {
    return {
         restrict : 'A',
         require: 'ngModel',
         link : function (scope, element, attr, ngModel) {

            $(element).daterangepicker();
         }
    };
});
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/momentjs/2.3.1/moment.min.js"></script>
<script src="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/assets/css/styles.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/prettify/prettify.css">
    <link rel="stylesheet" href="http://tamble.github.io/jquery-ui-daterangepicker/daterangepicker-master/jquery.comiseo.daterangepicker.css">
<div ng-app='publisher-portal'>

<input id="e2" type="text" ng-model="mydate" date-range-picker /> 
  </div>