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

发布时间：2020-12-17 07:26:51 所属栏目：安全来源：网络整理

导读：我正在学习角度,并且一直在尝试将 HTML文件片段动态加载到选项卡的内容窗格中. 在this linked plunker中,我创建了一个角度模块来配置状态 var app = angular.module('Plunker',['ui.router','ui.bootstrap']) app.config([ '$stateProvider','$urlRouterProv

我正在学习角度,并且一直在尝试将 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!