Question

我正在尝试在我的代码中添加datepicker但它的抛出错误：Bootstrap的JavaScript需要jQuery。请帮我解决这个错误。当我在单独的文件中创建单独的控制器时，代码可以正当我试图合并代码时，我没有得到如何调用控制器。这是我的html页面

<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="app1.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name='myform' ng-init="step = 1">
<div ng-show="step==1">
<div ng-form='step1form'>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 2">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase ready property
</button>
<button type="submit" class="OptionButton">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase under construction property
</button>
<button type="submit" class="OptionButton">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Transfer my existing home loan
</button>
<button type="submit" class="OptionButton">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Renovate my home
</button>
</div>
</div>
<div ng-show="step==2">
<div ng-form='step2form'>
            <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject"
             style="width: 100%;" />
</div>
</div>
</form>
</body>
</html>

这是我的JS代码

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

app.controller('MainCtrl', function($scope) {
  $scope.name = '';

          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };

});

 /*var app1 = angular.module("KendoDemos", [ "kendo.directives" ])
      app1.controller("MyCtrl", function($scope){
          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };
      })*/

   this is the code of datepicker. its works fine but its not working on merging. 
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content"ng-controller="MyCtrl">
        <div>

            <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject"
             style="width: 100%;" />

        </div>

    </div>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };
      })
</script>
</body>
</html>

Answer 1

这一行：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

应该在

之前调用

<script src="app1.js"></script>

这样，JQuery将在Bootstrap JS之前加载，你可以在你自己的JS中访问Bootstrap。

Answer 2

修改你的html以接收这些导入......

<!doctype html>
<html ng-app="plunker">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />

<base href="http://demos.telerik.com/kendo-ui/datepicker/angular">

<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="app1.js"></script>
</head>
<body ng-controller="MainCtrl">
    <form name='myform' ng-init="step = 1">
        <div ng-show="step==1">
            <div ng-form='step1form'>
                <button type="submit" class="OptionButton"
                    ng-disabled="!step1form.$valid" ng-click="step = 2">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Purchase ready
                    property
                </button>
                <button type="submit" class="OptionButton">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Purchase under
                    construction property
                </button>
                <button type="submit" class="OptionButton">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Transfer my
                    existing home loan
                </button>
                <button type="submit" class="OptionButton">
                    <img src="SoundCloud.png" alt="Save icon" /> <br /> Renovate my
                    home
                </button>
            </div>
        </div>
        <div ng-show="step==2">
            <div ng-form='step2form'>
                <input kendo-date-picker ng-model="dateString"
                    k-ng-model="dateObject" style="width: 100%;" />
            </div>
        </div>
    </form>
</body>
</html>

Answer 3

<!doctype html>
<html ng-app="KendoDemos">
<head>
    <base href="http://demos.telerik.com/kendo-ui/datepicker/angular">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css">
    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="angular.js"></script>
</head>
<body ng-controller="MyCtrl">
<form name='myform' ng-init="step = 1">
<div ng-show="step==1">
<div class="row">
<div class="col-sm-6"> <h3>I want home loan for</h3> </div>
<div ng-form='step1form'>
<div class="col-sm-6">
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 23">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase ready property
</button>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 23">
<img src="SoundCloud.png" alt="Save icon"/>
<br/>
Purchase under construction property
</button>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 23">
<img src="img/SoundCloud.png" alt="Save icon"/>
<br/>
Transfer my existing home loan
</button>
<button type="submit" class="OptionButton" ng-disabled="!step1form.$valid" ng-click="step = 2">
<img src="img/SoundCloud.png" alt="Save icon"/>
<br/>
Renovate my home
</button>
</div>
</div>
</div>
</div>
<div ng-show="step==23">
<div class="row">
<div class="col-sm-6"><h3>My co-applicant's monthly income is</h3></div>
<div class="col-sm-6">
<div ng-form='step23form'>
        <input kendo-date-picker
             ng-model="dateString"
             k-ng-model="dateObject"
             style="width: 100%;" />
</div>
<button ng-disabled="!step23form.$valid" ng-click="step = 24">Next</button>
</div>
</div>
</div>
</form>
<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function($scope){
          $scope.monthSelectorOptions = {
            start: "year",
            depth: "year"
          };
          $scope.getType = function(x) {
            return typeof x;
          };
          $scope.isDate = function(x) {
            return x instanceof Date;
          };
      })
</script>
</body>
</html>

错误：Bootstrap的JavaScript需要jQuery AngularJS

3 个答案: