个人中心
gpt4 book ai didi

javascript - Angular UI Bootstrap 选项卡在路线​​更改时打开

转载 作者：行者123 更新时间：2023-12-03 22:29:40 24 4
gpt4 key购买 nike

我正在使用 中的 tab 指令引导用户界面 对于我目前的 AngularJS 项目，并且在 的实现中苦苦挣扎基于路由的标签 .

<tabset>
    <tab heading="Dashboard"
             select="$parent.onTabSelected('dashboard')"
             active="$parent.isActive(this)">
        <!-- Content... -->
    </tab>
</tabset>

而 select单击选项卡标题时，属性可以正常更改路线我无法获得 active属性如上工作(在解析表达式后在 angular-ui 内部失败)。

所以我的问题是:为什么 active 属性不起作用，是否有更好的方法将选项卡绑定(bind)到我的双向路由？

更新:
以下是我的 Controller : 
MainCtrl = function($scope) {
    $scope.rooms = [{
        id : 0,
        title : 'Room 1'
    }, {
        id : 1,
        title : 'Room 2'
    }];

    $scope.isActive = function(route) {
        if(('#/' + route) === location.hash) {
            return true;
        }
        return false;
    }

    $scope.onTabSelected = function(tab) {
        var route;
        if ( typeof tab === 'string') {
            switch(tab) {
                case 'dashboard':
                    route = 'dashboard';
                    break;
            }
        } else {
            route = 'rooms/' + tab.room.id;
        }
        window.location.hash = '#/' + route;
    }
};
isActive方法被正确调用，但随后发生以下异常: 
TypeError: undefined is not a function
at postLink (http://fakepath/bootstrap-ui/templates.js:2374:11)

显然， setActive由于某种原因，没有创建指令函数内部的方法。知道为什么吗？

最佳答案

这是一个简单的工作示例，与您的代码很接近，但没有看到所有内容，将其保存为 index.html 并测试，尝试放入 plunkr(在 plunkr 中不可测试但可以工作，但源代码也在那里:http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/index.html ):

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
</head>

<body ng-controller="MainCtrl">

  <div ng-controller="TabCtrl">
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" select="onTabSelected(tab.slug)">
        {{ tab.content }}
      </tab>
    </tabset>
  </div>
  <script type="text/javascript" charset="utf-8">
    angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.when('/', {
            controller: 'MainCtrl'
        }).when('/room/:id', {
            controller: 'RoomCtrl',
        }).when('/dashboard', {
            controller: 'DashboardCtrl'            
        }).otherwise({
            redirectTo: '/'
        });
        $locationProvider.html5Mode(false);
    }]);    

    var TabCtrl = function($scope) {
      $scope.tabs = [{
        slug: 'dashboard',
        title: "Dashboard",
        content: "Your Dashboard"
      }, {
        slug: 'room-1',
        title: "Room 1",
        content: "Dynamic content 1"
      }, {
        slug: 'room-2',
        title: "Room 2",
        content: "Dynamic content 2"
      }];
    };

    RoomCtrl = function($scope, $location) {

    };

    DashboardCtrl = function($scope, $location) {

    };    

    MainCtrl = function($scope, $location) {

      $scope.onTabSelected = function(tab) {
        var route;
        if (typeof tab === 'string') {
          switch (tab) {
            case 'dashboard':
              route = tab;
              break;
            default:
              route = 'rooms/' + tab;
              break;
          }
        }
        $location.path('/' + route);
      };

    };
  </script>
</body>

</html>

关于javascript - Angular UI Bootstrap 选项卡在路线​​更改时打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18064889/

24 4 0
文章推荐： macos - 在MacOS上找到GNU
文章推荐： r - 对齐水平 ggplot 条形图的标题、副标题和标题
文章推荐： R ggplot2 : Change the spacing between the legend and the panel
文章推荐： python-3.x - 让 PyC​​harm 将字符串识别为路径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com