Angular Bootstrap 中的选项卡
Tabs in Angular Bootstrap
我尝试使用 Angular Bootstrap 只显示几个选项卡,但我看不到显示的任何内容。我只看到一个空白的白页。
我哪里错了?
html-
<html ng-app = 'myApp'>
<head>
<title>Chat</title>
</head>
<body>
<div ng-controller="Tabs">
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
{{tab.content}}
</tab>
</tabset>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-bootstrap/ui-bootstrap.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:我的控制器在这里
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope, $window) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
];
});
我确保正确加载了所有脚本。但是为什么不显示选项卡?我哪里错了?
如有任何帮助,我们将不胜感激。提前致谢!
编辑:
我浏览器中的控制台显示为:
XMLHttpRequest cannot load file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514
angular.js:12330 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html'.
at Error (native)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10514:11
at sendReq (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10333:9)
at serverRequest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10045:16)
at processQueue (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14567:28)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14583:27
at Scope.$eval (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15951:24)
at bootstrapApply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330
angular.js:10514 XMLHttpRequest cannot load file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514
angular.js:12330 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html'.
at Error (native)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10514:11
at sendReq (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10333:9)
at serverRequest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10045:16)
at processQueue (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14567:28)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14583:27
at Scope.$eval (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15951:24)
at bootstrapApply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330
angular.js:10514 XMLHttpRequest cannot load file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tabset.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514
angular.js:12330 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tabset.html'.
at Error (native)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10514:11
at sendReq (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10333:9)
at serverRequest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10045:16)
at processQueue (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14567:28)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14583:27
at Scope.$eval (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15951:24)
at bootstrapApply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330
2angular.js:12330 Error: [$compile:tpload] Failed to load template: template/tabs/tab.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2Ftabs%2Ftab.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17530)
at processQueue (angular.js:14567)
at angular.js:14583
at Scope.$eval (angular.js:15846)
at Scope.$digest (angular.js:15657)
at Scope.$apply (angular.js:15951)
at bootstrapApply (angular.js:1633)
at Object.invoke (angular.js:4450)
at doBootstrap (angular.js:1631)(anonymous function) @ angular.js:12330
angular.js:12330 Error: [$compile:tpload] Failed to load template: template/tabs/tabset.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2Ftabs%2Ftabset.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17530)
at processQueue (angular.js:14567)
at angular.js:14583
at Scope.$eval (angular.js:15846)
at Scope.$digest (angular.js:15657)
at Scope.$apply (angular.js:15951)
at bootstrapApply (angular.js:1633)
at Object.invoke (angular.js:4450)
at doBootstrap (angular.js:1631)(anonymous function) @ angular.js:12330
编辑 2:
包括我
<script src="ui-bootstrap-tpls-0.13.1.js"></script>
现在在我的代码中。所有的错误都消失了。
显示的是这个。
这是预期的结果。
chrome.exe --allow-file-access-from-files
或
chrome.exe --allow-file-access-from-files --disable-web-security
你应该加载 boostrap
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
在 <head>
和 </head>
之间添加这个
我尝试使用 Angular Bootstrap 只显示几个选项卡,但我看不到显示的任何内容。我只看到一个空白的白页。
我哪里错了?
html-
<html ng-app = 'myApp'>
<head>
<title>Chat</title>
</head>
<body>
<div ng-controller="Tabs">
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
{{tab.content}}
</tab>
</tabset>
</div>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-bootstrap/ui-bootstrap.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:我的控制器在这里
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope, $window) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
];
});
我确保正确加载了所有脚本。但是为什么不显示选项卡?我哪里错了?
如有任何帮助,我们将不胜感激。提前致谢!
编辑: 我浏览器中的控制台显示为:
XMLHttpRequest cannot load file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514
angular.js:12330 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html'.
at Error (native)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10514:11
at sendReq (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10333:9)
at serverRequest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10045:16)
at processQueue (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14567:28)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14583:27
at Scope.$eval (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15951:24)
at bootstrapApply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330
angular.js:10514 XMLHttpRequest cannot load file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514
angular.js:12330 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tab.html'.
at Error (native)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10514:11
at sendReq (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10333:9)
at serverRequest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10045:16)
at processQueue (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14567:28)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14583:27
at Scope.$eval (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15951:24)
at bootstrapApply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330
angular.js:10514 XMLHttpRequest cannot load file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tabset.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.js:10514
angular.js:12330 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/NIKHIL/Desktop/angular/template/tabs/tabset.html'.
at Error (native)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10514:11
at sendReq (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10333:9)
at serverRequest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:10045:16)
at processQueue (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14567:28)
at file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:14583:27
at Scope.$eval (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:15951:24)
at bootstrapApply (file:///C:/Users/NIKHIL/Desktop/angular/node_modules/angular/angular.js:1633:15)(anonymous function) @ angular.js:12330
2angular.js:12330 Error: [$compile:tpload] Failed to load template: template/tabs/tab.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2Ftabs%2Ftab.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17530)
at processQueue (angular.js:14567)
at angular.js:14583
at Scope.$eval (angular.js:15846)
at Scope.$digest (angular.js:15657)
at Scope.$apply (angular.js:15951)
at bootstrapApply (angular.js:1633)
at Object.invoke (angular.js:4450)
at doBootstrap (angular.js:1631)(anonymous function) @ angular.js:12330
angular.js:12330 Error: [$compile:tpload] Failed to load template: template/tabs/tabset.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.3/$compile/tpload?p0=template%2Ftabs%2Ftabset.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17530)
at processQueue (angular.js:14567)
at angular.js:14583
at Scope.$eval (angular.js:15846)
at Scope.$digest (angular.js:15657)
at Scope.$apply (angular.js:15951)
at bootstrapApply (angular.js:1633)
at Object.invoke (angular.js:4450)
at doBootstrap (angular.js:1631)(anonymous function) @ angular.js:12330
编辑 2:
包括我
<script src="ui-bootstrap-tpls-0.13.1.js"></script>
现在在我的代码中。所有的错误都消失了。
显示的是这个。
这是预期的结果。
chrome.exe --allow-file-access-from-files
或
chrome.exe --allow-file-access-from-files --disable-web-security
你应该加载 boostrap
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
在 <head>
和 </head>
之间添加这个