我正在学习 Angular，并且一直在尝试将 HTML 文件片段动态加载到选项卡的内容 Pane 中。
在 this linked plunker我创建了一个 Angular 模块来配置状态
var app = angular.module('Plunker', ['ui.router', 'ui.bootstrap'])
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("tab2", { url: "/tab2", templateUrl: "tab2.html" })
.state("tab3", { url: "/tab3", templateUrl: "tab3.html" });
$urlRouterProvider.otherwise('/');
}]);
app.controller("tabsController", function ($rootScope, $scope, $state) {
$scope.tabs = [
{ title: "My Tab 1", route: "tab1", active: true },
{ title: "My Tab 2", route: "tab2", active: false },
{ title: "My Tab 3", route: "tab3", active: false },
];
$scope.go = function (route) {
$state.go(route);
};
$scope.active = function (route) {
return $state.is(route);
};
$scope.$on("$stateChangeSuccess", function () {
$scope.tabs.forEach(function (tab) {
tab.active = $scope.active(tab.route);
});
});
});
并在index.html正文中为ui View 分配一个名称以将其与状态/路由关联起来
<body ng-app="Plunker">
<div ng-controller="tabsController">
<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<div ui-view="{{tab.route}}"></div>
</uib-tab>
</uib-tabset>
</div>
</body>
每个选项卡都应包含来自相应 html 文件片段 tab1.html、tab2.html 或 tab1.html 的内容。但我无法让它发挥作用。任何帮助完成这项工作将不胜感激。
最佳答案
您希望每个选项卡都有一个部分。为此，ui-router 的命名 View 功能可以帮助您。您不会更改状态，但将内容放在专用 View 上可以让您保持父模板的轻便性并很好地组织您的代码。此外，您可以在其他地方重复使用选项卡模板。
说明选项卡集组件所在位置的定义:
$stateProvider
.state('example', {
url: '/example',
views: {
"tab1": { templateUrl: "tab1.html" },
"tab2": { templateUrl: "tab2.html" },
"tab3": { templateUrl: "tab3.html" },
}
标签集定义:
<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" ...>
<div ui-view="{{tab.route}}"></div> <!-- ex: <div ui-view="tab1"></div> -->
</uib-tab>
</uib-tabset>
关于angularjs - 如何将 ui-router 状态加载到 ui-bootstrap 选项卡的内容中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33114821/