Question

我对这整个angularjs事情都很陌生，在解决问题上遇到了一些麻烦。所以我们有一个单页面应用程序在ng-view中加载每个页面我有一个指令实际上将日期选择器代码加载到视图中。当页面首次加载时，它很好，但是如果我点击另一个页面，然后点击返回＆＃34;添加＆＃34;它给我一个错误，上面写着＆＃34;错误：$（...）。datepicker不是一个函数＆＃34;。我不确定这是一个jquery问题还是什么问题。

这是我的代码：

index.html（朝向页面中间是加载视图的ng视图）

<!DOCTYPE html>
<html>
<head>
    <title>Rx Pricing Maintenance</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="Sat, 01 Dec 2001 00:00:00 GMT">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="resources/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
    <!-- <link rel="stylesheet" href="./resources/bootstrap-datepicker/css/datepicker.standalone.css"> -->
    <link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap.css">
    <link rel="stylesheet" href="resources/css/main.css">
    <link rel="stylesheet" href="resources/bootstrap-3.3.4-dist/css/bootstrap-dialog.css">
    <link rel="stylesheet" href="resources/DataTables-1.10.5-dist/css/jquery.dataTables.css">

    <!-- External Sources -->
    <script src="resources/jquery-2.1.3-dist/jquery-2.1.3.js"></script>
    <script src="./resources/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="./resources/angular-1.3.15/angular.js"></script>
    <script src="./resources/angular-1.3.15/angular-route.js"></script>
    <script src="./resources/angular-1.3.15/angular-resource.js"></script>
    <script src="./resources/bootstrap-3.3.4-dist/js/bootstrap-dialog.js"></script>
    <script src="resources/DataTables-1.10.5-dist/js/jquery.dataTables.js"></script>
    <script src="resources/angular-datatables-dist/angular-datatables.js"></script>
    <script src="resources/angular-datatables-dist/vendor/datatables-columnfilter/js/dataTables.columnFilter.js"></script>
    <script src="resources/angular-datatables-dist/columnfilter/angular-datatables.columnfilter.js"></script>
    <script src="resources/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

    <!-- Internal Sources -->
    <script src="resources/js/serviceCaller.js"></script>
    <script src="./resources/js/controllers.js"></script>
    <script src="./resources/js/application.js"></script>
    <script src="resources/alasql/alasql.min.js"></script>
    <script src="resources/alasql/xlsx.core.min.js"></script>
    <script src="resources/alasql/alasql.js"></script>



</head>
<body ng-app="pricingApp" style="padding-top: 50px;">
    <div class="container-fluid">
        <nav><nav>
        <div ng-view></div>
        <footer>
            <div class="footer-container">

            </div>
        </footer>
        <!-- end footer -->
    </div>
</body>
</html>

的application.js

'use strict';
/* App Module */

var pricingApp = angular.module('pricingApp', [
  'ngRoute',
  'pricingControllers'
]);

pricingApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
    $routeProvider.when('/', {
        templateUrl : 'views/home.html'
    }).when('/home', {
        templateUrl : 'views/home.html'
    }).when('/add', {
        templateUrl : 'views/add.html',
        controller : 'SchedulesController'
    }).when('/help', {
        templateUrl : 'views/help.html',
        controller : 'VersionController'
    });
    $locationProvider.html5Mode(false).hashPrefix('!');
} ]);

pricingApp.directive('myDatePicker',function(){
  return {
    restrict: 'E',
    templateUrl: 'views/dates.html',
    controller: function($scope){
        $(document).ready(function() {
            $('#startDatePicker')
                .datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true
            });
            $('#endDatePicker')
                .datepicker({
                    format: 'yyyy-mm-dd',
                    autoclose: true
            });
        });
    }
  }
});

add.html

<div class="main-container shadow-effect insert-tab">
<h2>Insert a New Pricing Schedule</h2>
<div>
         <form class="form-inline" name="pricingInsertForm"
        ng-submit="submitData()" role="form" novalidate >
               <my-date-picker></my-date-picker>
         </form>
     </div>

我已经留下了很多填充码，但这基本上是它的工作原理。所以当我在添加视图上从localhost加载应用程序时，它工作正常。但是，当我单击添加视图到主视图或类似的东西并返回到添加视图时，我收到错误。

我想知道是什么导致datepicker不是函数错误以及我可以做些什么来修复它。提前谢谢！

如何让我的ng-view

0 个答案: