我定义了这个状态:
.state('app.feedback', {
url: '/feedback',
views: {
'appContent': {
templateUrl: 'templates/feedback.html',
controller: 'feedbackCtrl',
customParameter: 'This is my Name'
}
}
})
我试图在customParameter
上显示appContent
。
这是我的控制者:
.controller('feedbackCtrl',
['$scope', '$log', '$state',
function($scope, $log, $state) {
$scope.customParameter = $state.current.customParameter;
}]);
这是我的观点:
<ion-view view-title="{{customParameter}}">
<ion-content>
<h1>{{customParameter}}</h1>
</ion-content>
</ion-view>
当我在状态声明上使用没有视图对象的自定义参数时,视图上没有显示任何内容,但是我需要在此项目中拥有多个视图。如何访问该自定义参数?
Ps:我正在使用Ionic 1.3.1
答案 0 :(得分:2)
使用state params将自定义数据传递到状态
.state('app.feedback', {
url: '/feedback',
views: {
'appContent': {
templateUrl: 'templates/feedback.html',
controller: 'feedbackCtrl'
}
},
params:{
customParameter: 'This is my Name'
}
})
在Controller中使用$ stateParams来获取customParameter
.controller('feedbackCtrl',
['$scope', '$log', '$state', $stateParams
function($scope, $log, $state, $stateParams) {
$scope.customParameter = $stateParams.customParameter;
}]);
视图是
<ion-view view-title="{{customParameter}}">
<ion-content>
<h1>{{customParameter}}</h1>
</ion-content>
</ion-view>
答案 1 :(得分:0)
我曾经试图获取参数的问题是错误的。我需要在$state
对象中挖掘更多以找到正确的方法。
所有参数都在$state.current
A以plunker为例(基于离子启动器侧菜单)
州:
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent' :{
templateUrl: "playlists.html",
controller: 'PlaylistsCtrl',
menuContentParam:'menuContentParam'
},
viewsParam:'viewsParam'
},
stateParam:'stateParam'
});
控制器
.controller('PlaylistsCtrl', function($scope, $state) {
$scope.stateParam = $state.current.stateParam;
$scope.viewsParam = $state.current.views.viewsParam;
$scope.menuContentParam = $state.current.views.menuContent.menuContentParam;
})
观点:
<ion-view title="Playlists">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item>{{stateParam}}</ion-item>
<ion-item>{{viewsParam}}</ion-item>
<ion-item>{{menuContentParam}}</ion-item>
</ion-list>
</ion-content>
</ion-view>