角料标签+ UI路由器：身体不加载 [英] Angular Material Tabs + ui-router: body not loading

问题描述

  

更新：使用 UI-SREF 和 MD-标签页固定在角材质0.10.0

首先，我们已经知道有类似这样的几个问题。
但是，我们一直在努力了几个小时，仍然没有运气，所以让我们看看，如果有人可以摆脱一点光在这种特殊情况下。

我们正在尝试有两个标签，用两种不同的意见的两个不同的控制器。

的标签渲染精细，他们的工作，并在标签中更改URL的变化，但永远不会加载标签身体。

与UI SREF是在一个范围界定，以避免 https://github.com/angular /材料/问题/ 2344

模块配置

 函数testRouteConfig（$ stateProvider）{
    $ stateProvider
      .STATE（'testTabs'，{
        摘要：真实，
        网址：'/测试/标签，
        templateUrl：'模块/测试/的test.html'，
        控制器：作为的TestController VM
      }）
      .STATE（'testTabs.testMain'，{
        网址：'/测试/主'，
        数据：{
          selectedTab'：0
        }，
        观点：{
          testMain：{
            templateUrl：'模块/测试/主/ mainTest.html'，
            控制器：'MainTestController为VM
          }
        }
      }）
      .STATE（'testTabs.testAbout'，{
        网址：'/测试/约，
        数据：{
          selectedTab'：1
        }，
        观点：{
          testAbout：{
            templateUrl：'模块/测试/约/ aboutTest.html，
            控制器：'AboutTestController为VM
          }
        }
      }）;
  }
 

标签定义（test.html的）

 ＆LT; MD-标签MD-选择=currentTabMD-拉伸标签=总级=主工具栏＆GT;
  ＆LT; MD-标签＆gt;
    ＆LT; MD-制表标签＆gt;＆LT;跨度UI-SREF =testTabs.testMain＆GT;简介＆LT; / SPAN＆GT;＆LT; / MD-制表标签＆gt;
    ＆LT; MD-标签体界面视图=testMain布局=纵布局填充＆GT;＆LT; / MD-制表身体GT;
  ＆LT; / MD-标签＆gt;
  ＆LT; MD-标签＆gt;
    ＆LT; MD-制表标签＆gt;＆LT;跨度UI-SREF =testTabs.testAbout＆gt;关于＆LT; / SPAN＆GT;＆LT; / MD-制表标签＆gt;
    ＆LT; MD-标签体界面视图=testAbout布局=纵布局填充＆GT;＆LT; / MD-制表身体GT;
  ＆LT; / MD-标签＆gt;
＆LT; / MD-标签＆GT;
 

主要控制器

 使用严格的;。$的TestController注入='$范围'];功能的TestController（$范围）{
  $范围。在（'$ stateChangeSuccess'，函数（事件，toState）{$
    $ scope.currentTab = toState.data.selectedTab;
  }）;
}module.exports =的TestController;
 

示例标签体

 ＆LT; P＆GT; {{vm.title}}＆LT; / P＆GT;
 

示例选项卡控制器

 使用严格的;。AboutTestController $注射= [];功能AboutTestController（）{
  VAR VM =这一点;  vm.title ='关于测试页面';
}module.exports = AboutTestController;
 

解决方案

首先，我认为你的路线并不像你想的那样。一个子状态（state.substate）的URL将被追加到该州的URL。链接到你的状态'testTabs.testMain 是 /测试/标签/测试/主。如果你希望它是绝对的，你必须prePEND一个 ^ ： ^ /测试/主。或者干脆让它相对于通过删除标题 /测试。

如果不这样的伎俩，试图绝对命名的看法：

 的意见：{
      testMain @ testTabs：{
        templateUrl：'模块/测试/主/ mainTest.html'，
        控制器：'MainTestController为VM
      }
}
 

Update: the use of ui-sref and md-tabs was fixed in Angular Material 0.10.0

First of all, we're aware there's several issues similar to this one. However, we've been trying for hours, and still no luck, so let's see if someone can shed a bit of light on this particular case.

We are trying to have two tabs, with two different views an two different controllers.

The tabs render fine, they work, and the URL changes on tab change, but the tab "body" is never loaded.

The ui-sref is defined in a span to avoid https://github.com/angular/material/issues/2344

Module configuration

  function testRouteConfig($stateProvider) {
    $stateProvider
      .state('testTabs', {
        abstract: true,
        url: '/test/tabs',
        templateUrl: 'modules/test/test.html',
        controller: 'TestController as vm'
      })
      .state('testTabs.testMain', {
        url: '/test/main',
        data: {
          'selectedTab': 0
        },
        views: {
          'testMain': {
            templateUrl: 'modules/test/main/mainTest.html',
            controller: 'MainTestController as vm'
          }
        }
      })
      .state('testTabs.testAbout', {
        url: '/test/about',
        data: {
          'selectedTab': 1
        },
        views: {
          'testAbout': {
            templateUrl: 'modules/test/about/aboutTest.html',
            controller: 'AboutTestController as vm'
          }
        }
      });
  }

Tabs definition (test.html)

<md-tabs md-selected="currentTab" md-stretch-tabs="always" class="main-toolbar">
  <md-tab>
    <md-tab-label><span ui-sref="testTabs.testMain">Profile</span></md-tab-label>
    <md-tab-body ui-view="testMain" layout="vertical" layout-fill></md-tab-body>
  </md-tab>
  <md-tab>
    <md-tab-label><span ui-sref="testTabs.testAbout">About</span></md-tab-label>
    <md-tab-body ui-view="testAbout" layout="vertical" layout-fill></md-tab-body>
  </md-tab>
</md-tabs>

Main controller

'use strict';

TestController.$inject = ['$scope'];

function TestController($scope) {
  $scope.$on('$stateChangeSuccess', function (event, toState) {
    $scope.currentTab = toState.data.selectedTab;
  });
}

module.exports = TestController;

Example tab body

<p>{{vm.title}}</p>

Example tab controller

'use strict';

AboutTestController.$inject = [];

function AboutTestController() {
  var vm = this;

  vm.title = 'About Test page';
}

module.exports = AboutTestController;

解决方案

First off, I think your routes are not as you want them to be. The url of a substate (state.substate) will be appended to the state's url. The url to your state 'testTabs.testMain' would be /test/tabs/test/main'. If you want it to be absolute, you have to prepend a ^: ^/test/main. Or simply make it relative by removing the heading /test.

If that doesn't do the trick, try naming the views absolutely:

views: {
      'testMain@testTabs': {
        templateUrl: 'modules/test/main/mainTest.html',
        controller: 'MainTestController as vm'
      }
}

这篇关于角料标签+ UI路由器：身体不加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！