Ui路由器选项卡与路由

时间:2015-05-07 21:52:06

标签: angularjs angular-ui-router

我正在使用UI-Router,我需要连接标签,其中网址也会发生变化。例如,我有一个包含3个子链接的页面:

  1. 客户概述(templates / customer.overview.html):example.com/customer/:id/overview
  2. 客户设置(templates / customer.settings.html):example.com/customer/:id/settings
  3. 客户联系信息(templates / customer.contact.html):example.com/customer/:id/contact
  4. 所有这三个页面都应该注入一个包含链接的主customers.main.html页面。

    我的州定义如下:

      $stateProvider
        .state('customer', {
          abstract: true,
          url: '/customer',
          templateProvider: function($templateCache) {
            return $templateCache.get('templates/customer.overview.html');
          }
        })
        .state('customer.overview', {
          url:'/:id/overview',
          controller: ''
          templateProvider: function($templateCache) {
            return $templateCache.get('templates/customer.settings.html');
          }
        })
        .state('customer.contact', {
          url:'/:id/contact',
          controller: ''
          templateProvider: function($templateCache) {
            return $templateCache.get('templates/customer.contact.html');
          }
        });
    

    我有一个customers.main.html页面:

    <div class="tabs" ng-controller="TabsCtrl as tabs">
       <a ng-repeat="tab in tabs" ui-sref='{{tab.route}}' ng-bind="tab.label">
    </div>
    

    TabsCtrl

    angular.module('customers')
      .controller('TabsCtrl', [
        function() {
    
        var self = this;
    
        self.tabs = [
          {
            label: 'Overview',
            route: 'customer.overview',
            active: false
          },
          {
            label: 'Settings',
            route: 'customer.settings',
            active: false
          },
          {
            label: 'Contact',
            route: 'customer.contact',
            active: false
          }
        ];
    
        self.selectedTab = self.tabs[0];
      }
    ]);
    

    但是,这似乎没有正常工作。点击时ui-sref指令始终解析为:/customers//settings。它没有拿起:id

    任何帮助?

2 个答案:

答案 0 :(得分:1)

这是因为您未在customerId函数中传递ui-sref,以便ui-srefui-sref="customer.overview(id: 1)",1可以根据{{1}动态更改}

customerId

Example Plunkr看看我是如何为<div class="tabs" ng-controller="TabsCtrl as tabs"> <a ng-repeat="tab in tabs" ui-sref="{{tab.route+'({ id:' + 1 + '})'}}" ng-bind="tab.label"> </div>

创建ui-sref

答案 1 :(得分:0)

我不确定但尝试这个,我认为你必须在控制器中使用$ scope,如下所示:          $ scope.tabs = [{.......},{.......},{......}]; // .....是你的数据  然后你可以使用ui-sref =“{{tab.route}}”

我有同样的问题,我用href =“#/ myUrl / {{idOfUser}} //概述”解决了这个问题 你也可以尝试这个,但是你有idOfUser并使用完整路径。我希望你明白我的意思。