açısal

ile jquery datepicker çelişkileri Açısal bir uygulama var ve ben this jquery datepicker eklemek istiyorum. Dışarıdaki açısal randevular olduğunu biliyorum, ancak yöneticim bu jquery datepicker'ı istiyor.açısal

JQuery datepicker çalışmıyor. Sadece jquery datepicker için harici dosyaları ekledim ve div'a ekledim. datepicker is not a function'u alırım. Uygulamamı sıkıyor.

Açısal 1.5.0 ve önyükleme kullandım 3.3.6.

Bu çakışmayı atlamanın bir yolu var mı?

Teşekkür

Bu benim

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

sahip sayfanın denetleyici içinde benim yapısı

benim kodunda sonra

<!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) {

ve ve benim html sadece

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

olduğunu

kaynak

2016-03-30 slevin

Eh herkes benim html

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); } } });

ve sonra bir anda

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

Teşekkür direktifini kopyalamak . Sonra, bir çatışmadan ziyade doğru bir şekilde başlatmayacağınız gibi geliyor. Kurulumunuz için bir http://jsfiddle.net/ yapmaya çalışabilir misiniz? O zaman yardım etmek daha kolay. –

bu bağlantı size yardımcı olacaktır [codepen] (http://codepen.io/tutorialab/pen/JDxkn) –

işte bir ** çalışma ** kopya [link] (http://plnkr.co/edit/TTBhwCqioKEELAGfkrwl?p = önizleme) – manish

li deneyin ke bu ... açısal komut yukarıdaki

var myApp = angular.module('myApp', []); 
 

 
myApp.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); 
 
    } 
 
    } 
 
});

<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>

kaynak

2016-03-30 08:07:18

Bak anne, hiçbir çatışma İşte

externl kütüphaneleri eklemek dış kütüphanelerin

yapısı ne yaptım

<!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) {

ve sonra o datepicker bir işlev olmadığını söylüyor eğer benim açısal (javascript) içinde

sadece

kaynak

2016-03-30 08:12:31 slevin

cevap

İlgili konular