angularjs – 如何将ui-router状态加载到ui-bootstrap选项卡的内容中

我正在学习角度,并且一直在尝试将 HTML 文件片段动态加载到选项卡的内容窗格中.

在this linked plunker中,我创建了一个角度模块来配置状态

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",];

        $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的命名视图功能可以帮助您.您不会更改状态,但在专用视图上拥有内容可以让您保持父模板的轻松并很好地组织您的代码.此外,您可以在其他地方重用标签模板.

tabset组件所在的状态定义：

$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>

见updated plunker

原文地址：https://www.jb51.cc/angularjs/142012.html

angularjs – 如何将ui-router状态加载到ui-bootstrap选项卡的内容中

相关推荐