Question

当我尝试使用jquery ui到NgRoute Angularjs打开日历时，我遇到了一些问题。我尝试删除ng-view标签，但效果很好。我需要和NgRoute合作。

的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

我将非常感谢您在此问题上的任何帮助。

非常感谢，爱丽儿。

Answer 1

在DatePicker.html中，您不再需要所有标签，只需要进入ng-view内的标签：

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

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

这将进入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>

我不知道它是否能解决你的问题，但这是正确的做法......

datetimepicker不使用AngularJs的NgRoute显示日历

1 个答案: