datetimepicker zeigt keinen Kalender mit NgRoute von AngularJs an

Ich habe einige Probleme, als ich versuchte, einen Kalender mit jquery ui durch NgRoute Angularjs zu öffnen. Ich habe versucht, ng-view Tag zu entfernen und es funktioniert gut. Ich brauche es mit NgRoute zu arbeiten.datetimepicker zeigt keinen Kalender mit NgRoute von AngularJs an

index.html

<!DOCTYPE html> 
<html ng-app="mainApp"> 

<head lang="en"> 
    <title>AngularJS Routing</title> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
</head> 

<body> 

    <li> <a href="#/datePicker"> Date Picker</a> </li> 

    <div ng-app="mainApp"> 
    <ng-view></ng-view> 
    </div> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script> 
    <script type="text/javascript" src="main.js"></script> 
</body> 

</html>

main.jsp

(function() { 
    "use strict"; 

var mainApp = angular.module("mainApp", ['ngRoute']); 

mainApp.config(function($routeProvider) { 
    $routeProvider 
     .when('/datePicker', { 
      templateUrl: 'DatePicker.html', 
      controller: 'DemoCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/index' 
     }); 
}); 

mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) { 

     //$('#datepicker1').datepicker(); 

}]); 

})();

DatePicker.html

<!DOCTYPE html> 
<html ng-app="mainApp"> 

    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="main.js"></script> 

    <script> 
     $(function() { 
      $("#datepicker1").datepicker(); 
     }); 
    </script> 
    </head> 

<body> 

    <form> 
    <p>Fecha: <input id="datepicker1" type="text" ></p> 
    <a href="#/index"> Main menu</a> 
</form> 
</body> 

</html>

http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j

werde ich zu diesem Thema jede Hilfe dankbar.

Vielen Dank, Ariel.

Quelle

2016-08-30 Ariel Sabbadini

in DatePicker.html müssen Sie nicht alle Tags müssen wieder nur diejenigen, die in ng-View gehen:

<script> 
    $(function() { 
     $("#datepicker1").datepicker(); 
    }); 
</script> 

<form> 
    <p>Fecha: <input id="datepicker1" type="text" ></p> 
    <a href="#/index"> Main menu</a> 
</form>

Und das wird gehen in index.html:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="main.js"></script>

ich nicht wissen, ob es dein Problem hat, aber es ist die richtige Sache zu tun ...

Quelle

2016-08-30 20:23:17

Ich werde diese Plunkr hier verlassen: http://plnkr.co/edit/aVdvJoFIIhtQTknuoiRs?p=preview :-) – PerfectPixel

Großartig ! Es funktioniert jetzt. Vielen Dank Gustavo! –

Können Sie die Antwort akzeptieren;) Froh, dass es geholfen hat. –

datetimepicker zeigt keinen Kalender mit NgRoute von AngularJs an

Antwort

Verwandte Themen