如何访问状态视图的自定义属性?

时间:2016-09-16 18:30:50

标签: angularjs ionic-framework

我定义了这个状态:

.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

2 个答案:

答案 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>