2016-07-08 161 views
1

我正在嘗試這個簡單的教程來嘗試UI Bootstrap: https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
但我遇到了兩個問題。爲什麼模塊'ui.bootstrap'不可用?

SyntaxError: expected expression, got '<' at ui-bootstrap-1.3.3.js:5:0

這是第一個問題。我沒有編輯的文件中任何東西,但它說的第一行<!DOCTYPE html>

而另外一個意外的標記是如下:

Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我看到你所有相關的問題,一些他們建議包括其他依賴項,而其他建議確保依賴項的順序。試過一切,但沒有喜悅。

以下是我的html和js代碼。請看看
HTML

<html> 
<head> 
<style type="text/css"> 
      @import "css/bootstrap.css"; 
      @import "css/style.css"; 
     </style> 
     <script src="js/angular.js"></script> 
     <script src="js/angular-animate.js"></script> 
     <script src="js/angular-touch.js"></script> 
     <script src="js/ui-bootstrap-1.3.3.js"></script> 
     <script src="js/app.js"></script> 
</head> 
<body> 
<div class="container" ng-app="app" ng-controller="mainController"> 

    <div class="text-center"> 
    <p>Example of Angular and the normal Bootstrap JavaScript components</p> 
    <p class="text-success">This will work</p> 
    </div> 

    <h2>Buttons</h2> 
    <div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary" ng-model="bigData.breakfast" btn-checkbox> 
     Breakfast 
    </label> 
    <label class="btn btn-primary" ng-model="bigData.lunch" btn-checkbox> 
     Lunch 
    </label> 
    <label class="btn btn-primary" ng-model="bigData.dinner" btn-checkbox> 
     Dinner 
    </label> 
    </div> 

    <pre><code>{{ bigData | json }}</code></pre> 

    <h2>Collapse</h2> 

    <a href="#" class="btn btn-primary" ng-click="isCollapsed = !isCollapsed"> 
    Toggle Panel 
    </a> 

    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a href="#" ng-click="isCollapsed = !isCollapsed"> 
      Collapsible Group Item #1 
     </a> 
     </h4> 
    </div> 
    <div collapse="isCollapsed"> 
     <div class="panel-body">Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 

    <pre><code>{{ isCollapsed }}</code></pre> 

</div> 
</body> 
</html> 

JS

angular.module('app', ['ngAnimate', 'ngTouch', 'ui.bootstrap']) 

.controller('mainController', function($scope) { 

    // BUTTONS ====================== 

    // define some random object 
    $scope.bigData = {}; 

    $scope.bigData.breakfast = false; 
    $scope.bigData.lunch = false; 
    $scope.bigData.dinner = false; 

    // COLLAPSE ===================== 
    $scope.isCollapsed = false; 

}); 

不知道發生了什麼錯誤。

編輯 版本細節方面如下
引導v3.3.6


角動畫
角接觸 所有人都具有版本AngularJS V1.5.3

+0

似乎是你需要安裝UI,引導,包括在您的項目的第二個錯誤在UI引導 – devqon

+0

的錯誤。 –

+0

@neha soni安裝?是不是隻是下載js文件並通過腳本標籤添加足夠?有沒有獨立的安裝類的東西? –

回答

2

確保ui-bootstrap-1.3.3已正確加載到您的應用中。

請在下面找到工作plunker:

http://plnkr.co/edit/evG4XQ9ih9Cx0d1WF6YU?p=preview

+0

我發現了一個快速修復。似乎在我的系統上下載的文件無法正常工作。 但是,如果我指的是鏈接:''it works。因此,現在我剛剛更換了uibootstarp導入線,其餘的導入都是這樣的 –

+0

很高興你的問題得到了解決,如果對你有幫助,請更正答案 – varit05

+0

但是你可以看看在教程網站上,如果我們檢查/取消選中任何項目,同樣會立即反映在json輸出中,類似於collapse,輸出將更改爲true/false,但是,內容沒有在這裏崩潰,但在教程網站上它的工作完全正常。任何想法? –

2

你缺少ui-bootstrap-tpls.js文件。

將此文件添加到您的網頁。

見例如working plunkr

相關問題