Question

所以我有一个角度应用程序，我想插入this jquery datepicker。我知道有角度的日期选择器，但我的经理想要这个jquery datepicker。

jquery datepicker不起作用。我只是包含jquery datepicker的外部文件，并将其添加到div。我得到datepicker is not a function。它堵塞了我的申请。

我使用angular 1.5.0和bootstrap 3.3.6。

有没有办法绕过这场冲突？

由于

这是我的结构

<!DOCTYPE html> 
<html>
    <head>  
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <base href="/apps/ely/">

        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

        <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">        
        <link href="./css/timelineCSS.css" rel="stylesheet">        

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
        <script src="./js/angular-filter.min.js"></script> 

        <!--  <script src="./js/ui-bootstrap-1.2.2.min.js"></script> -->                    

        <script src="./js/angular-local-storage.min.js"></script>                   

        <script src="./js/progressbar.min.js"></script>    

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

        <link href="./css/cssStyle.css" rel="stylesheet">
        <link href="./css/cssStyleQueries.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

         <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

        <script>         
            var app = angular.module('app', ['ngRoute', 'LocalStorageModule', 'ngAnimate', 'ui.bootstrap', 'angular.filter']);                   
            app.config(function ($routeProvider , $httpProvider, localStorageServiceProvider) {

以后在我的代码中，在我所拥有的页面的控制器内

$(function() {
   $( "#datepicker" ).datepicker();
});

我的html只是

  <p>Date: <input type="text" id="datepicker"></p>

Answer 1

尝试这样...在角度脚本

之上添加externl库

＆＃13;

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>


<div id="wrapper" ng-app="myApp">
  <input type="text" ng-model="datepicker"  datepicker />
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

看妈妈，没有冲突

这就是我做的事情

外部库的结构

<!DOCTYPE html> 
<html>
    <head>  
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <base href="/apps/elety/">

        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

        <link href="./css/ie10-viewport-bug-workaround.css" rel="stylesheet">        
        <link href="./css/timelineCSS.css" rel="stylesheet">        

        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
        <script src="./js/angular-filter.min.js"></script> 

        <script src="./js/ui-bootstrap-1.2.2.min.js"></script> 

          <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


        <script src="./js/angular-local-storage.min.js"></script>                   

        <script src="./js/progressbar.min.js"></script>    

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

        <link href="./css/cssStyle.css" rel="stylesheet">
        <link href="./css/cssStyleQueries.css" rel="stylesheet">

        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

        <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700,700italic,900,900italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>





        <script>         
            var app = angular.module('app', ['ngRoute', 'LocalStorageModule', 'ngAnimate', 'ui.bootstrap', 'angular.filter']);                   
            app.config(function ($routeProvider , $httpProvider, localStorageServiceProvider) {

然后在我的角度（javascript）

只需复制指令

即可

app.directive("datepicker", function () {
  return {
    restrict: "A",
    require: "ngModel",
    link: function (scope, elem, attrs, ngModelCtrl) {
      var updateModel = function (dateText) {
        scope.$apply(function () {
          ngModelCtrl.$setViewValue(dateText);
        });
      };
      var options = {
        dateFormat: "dd/mm/yy",
        onSelect: function (dateText) {
          updateModel(dateText);
        }
      };
      elem.datepicker(options);
    }
  }
});

然后在我的HTML中，只是

<input type="text" ng-model="datePicker" datepicker />

谢谢大家

jquery datepicker与angular冲突

2 个答案: