AngularJS UI-router 如何将状态视图加载到顶级状态的另一个嵌套视图中? [英] AngularJS UI-router How to load a state view into another nested view of a top level state?
问题描述
我有一个名为 container
的顶级状态,其中包含命名视图 dashboard
和 feed
.
在 dashboard
视图模板内,我有一个 <div ui-view="tickers"></div>
在那里我想加载tickers
状态,我该怎么做?
这是通过在命名视图 dashboard@container
中添加一些东西来完成的吗?
容器模块
//容器模块///////////////////////////////////////////////////////////////////////////////var container = angular.module('container', ['ui.router'])container.config(function($stateProvider) {const 容器 = {name: '容器',url: '/容器',意见:{'':{templateUrl: 'container-template.html',控制器:功能($范围){console.log('CONTAINER view $state');}},'仪表板@容器':{templateUrl: 'dashboard-template.html',控制器:功能($范围){console.log('仪表板视图 $state');}},'饲料@容器':{templateUrl: 'feed-template.html',控制器:功能($范围){console.log('FEED 查看 $state');}}}}$stateProvider.state(容器);});
容器模板
<div class="fl w100"><em>容器状态</em><div ui-view="dashboard" class="fl"></div><div ui-view="feed" class="fl"></div>
仪表板模板
<em>仪表板状态</em><div ui-view="tickers"></div>
代码模块
//代码模块var tickers = angular.module('tickers', ['ui.router'])tickers.config(function($stateProvider) {常量代码 = {父:'仪表板',name: 'tickers',url: '/tickers',参数:{代码:{}},意见:{'':{templateUrl: 'tickers-template.html',控制器:函数($scope,$state){console.log('TICKERS 查看 $state');$scope.tickers = [{ id: 1, 股票代码: 'AAPL' },{ id: 2, 代码: 'GOOG' },{ id: 3, 代码: 'TWTR' }];$scope.clickTicker = function(ticker) {console.log('ticker', 股票代码)$state.go('tags', { ticker: ticker });}}},'标签@tickers':{templateUrl: 'tags-template.html',控制器:功能($范围){console.log('标签视图 $state');}}}}$stateProvider.state(tickers);})
主要的tickersApp模块
//TickersApp 模块////////////////////////////////////////////////////////////////////////////////var tickersApp = angular.module('tickersApp', ['ui.router', 'container', 'tickers']);tickersApp.config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/login');常量登录 = {name: '登录',网址:'/登录',templateUrl: '登录模板.html',bindToController: 真,controllerAs: 'l',控制器:功能($状态){this.login = function() {$state.go('容器', { });}}}$stateProvider.state(登录);});
仍在等待更多答案,但到目前为止我通过使用 dashboard 内的
tickers.component
使其工作-template.html
https://plnkr.co/edit/6dLIk1vq6M1Dsgy8Y4Zk?p=preview
<div class="fl w100"><em>仪表板状态</em><!--<div ui-view="tickers"></div>--><tickers-module></tickers-module>
<小时>
tickers.component('tickersModule', {templateUrl: 'tickers-template.html',控制器:函数($scope,$state){console.log('TICKERS 组件');$scope.tickers = [{ id: 1, 股票代码: 'AAPL' },{ id: 2, 代码: 'GOOG' },{ id: 3, 代码: 'TWTR' }];$scope.clickTicker = function(ticker) {console.log('点击了代码!', $state)$state.go('tags', { ticker: ticker });}}});
https://plnkr.co/edit/XnDUIqfVuBS2Hr2N1ooy?p=preview
I have a top level state called container
which holds the named views dashboard
and feed
.
Inside of the dashboard
view template I have a <div ui-view="tickers"></div>
in there I want to load the tickers
state, how would I do that?
Is this done by adding something into the named view dashboard@container
?
The Container module
// Container module
////////////////////////////////////////////////////////////////////////////////
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 view $state');
}
},
'dashboard@container': {
templateUrl: 'dashboard-template.html',
controller: function($scope) {
console.log('DASHBOARD view $state');
}
},
'feed@container': {
templateUrl: 'feed-template.html',
controller: function($scope) {
console.log('FEED view $state');
}
}
}
}
$stateProvider.state(container);
});
The Container template
<div>
<div class="fl w100">
<em>Container state</em>
</div>
<div ui-view="dashboard" class="fl"></div>
<div ui-view="feed" class="fl"></div>
</div>
The Dashboard template
<div class="dashboard-state">
<em>Dashbaord state</em>
<div ui-view="tickers"></div>
</div>
The Tickers module
// Tickers module
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 view $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 view $state');
}
}
}
}
$stateProvider.state(tickers);
})
The main tickersApp module
// TickersApp module
////////////////////////////////////////////////////////////////////////////////
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);
});
Still waiting on more answers, but I got this working so far by using a tickers.component
inside of the dashboard-template.html
https://plnkr.co/edit/6dLIk1vq6M1Dsgy8Y4Zk?p=preview
<div class="dashboard-state">
<div class="fl w100">
<em>Dashbaord state</em>
</div>
<!--<div ui-view="tickers"></div>-->
<tickers-module></tickers-module>
</div>
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 });
}
}
});
这篇关于AngularJS UI-router 如何将状态视图加载到顶级状态的另一个嵌套视图中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!