AngularJS UI-router如何将一个状态视图加载到另一个顶级状态的嵌套视图中？

17 浏览
0 Comments

AngularJS UI-router如何将一个状态视图加载到另一个顶级状态的嵌套视图中？

我有一个名为container的顶级状态，其中包含了名为dashboard和feed的命名视图。

在dashboard视图模板中，我有一个，我想在其中加载tickers状态，我应该如何做到这一点？

这是通过在命名视图dashboard@container中添加一些内容来完成的吗？

enter image description here

Container模块

// Container模块
////////////////////////////////////////////////////////////////////////////////
var container = angular.module('container', [ 'ui.router' ])
  container.config(function($stateProvider) {
    const container = {
      name: 'container',
      url: '/container',
      views: {
        '': {
          templateUrl: 'container-template.html',
          controller: function($scope) {
            console.log('CONTAINER视图$state');
          }
        },
        'dashboard@container': {
          templateUrl: 'dashboard-template.html',
          controller: function($scope) {
            console.log('DASHBOARD视图$state');
          }
        },
        'feed@container': {
          templateUrl: 'feed-template.html',
          controller: function($scope) {
            console.log('FEED视图$state');
          }
        }
      }
    }
    $stateProvider.state(container);
  });

Container模板

    Container状态

Dashboard模板

  Dashboard状态

Tickers模块

// Tickers模块
var tickers = angular.module('tickers', ['ui.router'])
tickers.config(function($stateProvider) {
  const tickers = {
    parent: 'dashboard',
    name: 'tickers',
    url: '/tickers',
    params: {
      ticker: {}
    },
    views: {
      '': {
        templateUrl: 'tickers-template.html',
        controller: function($scope, $state) {
          console.log('TICKERS视图$state');
          $scope.tickers = [
            { id: 1, ticker: 'AAPL' },
            { id: 2, ticker: 'GOOG' },
            { id: 3, ticker: 'TWTR' }
          ];
          $scope.clickTicker = function(ticker) {
            console.log('ticker', ticker)
            $state.go('tags', { ticker: ticker });
          }
        }
      },
      'tags@tickers': {
        templateUrl: 'tags-template.html',
        controller: function($scope) {
          console.log('TAGS视图$state');
        }
      }
    }
  }
  $stateProvider.state(tickers);
})

主要的tickersApp模块

// TickersApp模块
////////////////////////////////////////////////////////////////////////////////
var tickersApp = angular.module('tickersApp', ['ui.router', 'container', 'tickers']);
tickersApp.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/login');
  const login = {
    name: 'login',
    url: '/login',
    templateUrl: 'login-template.html',
    bindToController: true,
    controllerAs: 'l',
    controller: function($state) {
      this.login = function() {
        $state.go('container', { });
      }
    }
  }
  $stateProvider
    .state(login);
});

0

2 答案

0 Comments

问题：如何在一个顶层状态的嵌套视图中加载另一个状态视图？

解决方法：

我认为你应该在容器上使用不同的状态，如下所示：

$stateProvider
    .state('container', {
        url: '/container',
        templateUrl: ''
    })
    .state('container.feed', {
        url: '/container/feed',
        templateUrl: 'partial-home.html'
    })
    .state('container.dashboard', {
        url: '/container,
        templateUrl: 'partial-home.html'
    })

然后使用`ui-sref`。

我想避免使用`ui-sref`，而是在所有控制器内部使用`$state.go`。好吧，如果我采用上述方法，我的问题仍然存在，如何在仪表板状态内实现tickers状态？您能在plnkr上进行分解吗？

0
0 Comments

问题的出现是因为在AngularJS UI-router中，想要将一个状态视图加载到另一个嵌套视图中的顶级状态。要解决这个问题，可以使用tickers.component组件在dashboard-template.html中实现。

首先，在dashboard-template.html中，添加一个div元素，并设置class为"dashboard-state"。在这个div中，我们将tickers.component作为嵌套视图加载进来。代码如下：

<div class="dashboard-state">
  <div class="fl w100">
    <em>Dashbaord state</em>  
  </div>
  <tickers-module></tickers-module>
</div>

然后，在tickers-template.html中，我们可以定义一个tickersModule组件，设置它的templateUrl为'tickers-template.html'，并添加一个控制器。在控制器中，我们可以定义一个$scope.tickers数组，其中包含了一些股票信息。我们还可以定义一个clickTicker函数，当点击某个股票时，会调用$state.go('tags', { ticker: ticker })方法，将ticker作为参数传递给'tags'状态。

代码如下：

tickers.component('tickersModule', {
  templateUrl: 'tickers-template.html',
  controller: function($scope, $state) {
    console.log('TICKERS component');
    $scope.tickers = [
      { id: 1, ticker: 'AAPL' },
      { id: 2, ticker: 'GOOG' },
      { id: 3, ticker: 'TWTR' }
    ];
    $scope.clickTicker = function(ticker) {
      console.log(' Ticker clicked!', $state)
      $state.go('tags', { ticker: ticker });
    }
  }
});

以上就是解决这个问题的方法。通过使用tickers.component组件，在dashboard-template.html中嵌套加载tickers视图，并在tickers-template.html中定义控制器和相应的逻辑，就能实现将一个状态视图加载到另一个嵌套视图中的顶级状态。

0