Question

我正在学习角度，并且一直在尝试将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", 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的内容。但是我无法让它发挥作用。任何帮助做这项工作将非常感激。

Answer 1

您希望每个标签都有一个部分。为此，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

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

1 个答案: