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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/angularjs/142012.html

猜你在找的Angularjs相关文章