0
https://angular-ui.github.io/bootstrap/github上angularJS引導教程不是爲我工作
以上是鏈接，最好的教程和代碼，我已經找到了angularJS引導相結合的元素。
爲html和angularJS提供的代碼爲：datepicker，timepicker，typeheads，accordion，很多more ...最好的網站來引用。
現在我唯一的問題是，當我從那裏直接複製粘貼angularJS和html代碼的頁面嘗試手風琴時，它似乎沒有工作。我嘗試了打字機和手風琴。
我需要在本地下載，保存和鏈接某個文件嗎？ 我似乎不明白！任何嘗試過以上的人都可以告訴我？
typehead.html：
<head>
<title>Angular Accordion</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="typehead.js"></script>
</head>
<body ng-app="ui.bootstrap.demo">
<script type="text/ng-template" id="customTemplate.html">
<a>
<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</a>
</script>
<script type="text/ng-template" id="customPopupTemplate.html">
<div class="custom-popup-wrapper" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" ng-show="isOpen() && !moveInProgress" aria-hidden="{{!isOpen()}}">
<p class="message">select location from drop down.</p>
<ul class="dropdown-menu" role="listbox">
<li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
<div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
</li>
</ul>
</div>
</script>
<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
<h4>Static arrays</h4>
<pre>Model: {{selected | json}}</pre>
<input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
<h4>Asynchronous results</h4>
<pre>Model: {{asyncSelected | json}}</pre>
<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" class="form-control">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
<h4>ngModelOptions support</h4>
<pre>Model: {{ngModelOptionsSelected | json}}</pre>
<input type="text" ng-model="ngModelOptionsSelected" ng-model-options="modelOptions" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
<h4>Custom templates for results</h4>
<pre>Model: {{customSelected | json}}</pre>
<input type="text" ng-model="customSelected" placeholder="Custom template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control" typeahead-show-hint="true"
typeahead-min-length="0">
<h4>Custom popup templates for typeahead's dropdown</h4>
<pre>Model: {{customPopupSelected | json}}</pre>
<input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
</div>
</body>
typehead.js：以上
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {
var _selected;
$scope.selected = undefined;
$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
// Any function returning a promise object can be used to load values asynchronously
$scope.getLocation = function(val) {
return $http.get('//maps.googleapis.com/maps/api/geocode/json', {
params: {
address: val,
sensor: false
}
}).then(function(response) {
return response.data.results.map(function(item) {
return item.formatted_address;
});
});
};
$scope.ngModelOptionsSelected = function(value) {
if (arguments.length) {
_selected = value;
} else {
return _selected;
}
};
$scope.modelOptions = {
debounce: {
default: 500,
blur: 250
},
getterSetter: true
};
$scope.statesWithFlags = [{
'name': 'Alabama',
'flag': '5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'
}, {
'name': 'Alaska',
'flag': 'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'
}, {
'name': 'Arizona',
'flag': '9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'
}, {
'name': 'Arkansas',
'flag': '9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'
}, {
'name': 'California',
'flag': '0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'
}, {
'name': 'Colorado',
'flag': '4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'
}, {
'name': 'Connecticut',
'flag': '9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'
}, {
'name': 'Delaware',
'flag': 'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'
}, {
'name': 'Florida',
'flag': 'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'
}, {
'name': 'Georgia',
'flag': '5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'
}, {
'name': 'Hawaii',
'flag': 'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'
}, {
'name': 'Idaho',
'flag': 'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'
}, {
'name': 'Illinois',
'flag': '0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'
}, {
'name': 'Indiana',
'flag': 'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'
}, {
'name': 'Iowa',
'flag': 'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'
}, {
'name': 'Kansas',
'flag': 'd/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'
}, {
'name': 'Kentucky',
'flag': '8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'
}, {
'name': 'Louisiana',
'flag': 'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'
}, {
'name': 'Maine',
'flag': '3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'
}, {
'name': 'Maryland',
'flag': 'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'
}, {
'name': 'Massachusetts',
'flag': 'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'
}, {
'name': 'Michigan',
'flag': 'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'
}, {
'name': 'Minnesota',
'flag': 'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'
}, {
'name': 'Mississippi',
'flag': '4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'
}, {
'name': 'Missouri',
'flag': '5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'
}, {
'name': 'Montana',
'flag': 'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'
}, {
'name': 'Nebraska',
'flag': '4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'
}, {
'name': 'Nevada',
'flag': 'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'
}, {
'name': 'New Hampshire',
'flag': '2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'
}, {
'name': 'New Jersey',
'flag': '9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'
}, {
'name': 'New Mexico',
'flag': 'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'
}, {
'name': 'New York',
'flag': '1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'
}, {
'name': 'North Carolina',
'flag': 'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'
}, {
'name': 'North Dakota',
'flag': 'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'
}, {
'name': 'Ohio',
'flag': '4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'
}, {
'name': 'Oklahoma',
'flag': '6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'
}, {
'name': 'Oregon',
'flag': 'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'
}, {
'name': 'Pennsylvania',
'flag': 'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'
}, {
'name': 'Rhode Island',
'flag': 'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'
}, {
'name': 'South Carolina',
'flag': '6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'
}, {
'name': 'South Dakota',
'flag': '1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'
}, {
'name': 'Tennessee',
'flag': '9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'
}, {
'name': 'Texas',
'flag': 'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'
}, {
'name': 'Utah',
'flag': 'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'
}, {
'name': 'Vermont',
'flag': '4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'
}, {
'name': 'Virginia',
'flag': '4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'
}, {
'name': 'Washington',
'flag': '5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'
}, {
'name': 'West Virginia',
'flag': '2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'
}, {
'name': 'Wisconsin',
'flag': '2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'
}, {
'name': 'Wyoming',
'flag': 'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'
}];
});
是確切的代碼我複製從文檔中粘貼，但未能取得結果！
其次是由控制檯顯示的錯誤：從用戶響應「桑卡Gurav」添加正確的鏈接後
Uncaught SyntaxError: Unexpected token < (index):1
控制檯錯誤2：
Uncaught Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to:
Error: [$injector:nomod] Module 'ui.bootstrap.demo' 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.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=ui.bootstrap.demo
at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:68:12
at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:2015:17
at ensure (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:1939:38)
at module (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:2013:14)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:4503:22
at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:321:20)
at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:4487:5)
at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:4409:19)
at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:1691:20)
at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js:1712:12)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=ui.bootstrap.demo&p….googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.js%3A1712%3A12)
您的代碼缺少ng-app指令。 – Naga2Raja