https://angular-ui.github.io/bootstrap/
上面是我为angularJS bootstrap组合元素找到的最佳教程和代码的链接。
html和angularJS的代码是：datepicker，timepicker，typeheads，accordion，lot 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'
}];
});
上面是我从文档中粘贴的确切代码，但未能得到结果！
以下是控制台显示的错误：
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)
答案 0 :(得分：0)
它应该是这样的：
var demo = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
demo.controller('TypeaheadCtrl', function($scope, $http) {
//your code
});
答案 1 :(得分：0)
你可以这样做
在HTML文件中添加如下：
<html lang="en" ng-app="myApp"></html>
OR
<body ng-app="myApp"></body>
但添加HTML标记会考虑最佳做法而不是正文标记，除非您不具备模块
在控制器文件中添加以下代码
var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
myApp.controller('TypeaheadCtrl', function($scope, $http) {
//your code
});
答案 2 :(得分：0)
你得到注射器错误..所以第一次检查你的文件是否在你的目录中，第二次检查你的链接，即使你得到相同的错误然后检查你的拼写错误（有时这些错误只是因为一些愚蠢的错误而发生）。
确保你有你的＆＃34; ui-bootstrap-tpls-1.2.1.js＆＃34; （或缩小文件）文件在您的目录中。
答案 3 :(得分：0)
只需将'ui.bootstrap'更改为plunker