Question

所以我的离子应用程序中有一个侧边菜单，存在于我的模板中。以下是我在app.js中设置的方法：

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/rubyonic/menu.html",
    controller: 'AppCtrl',
  })

   .state('app.studies', {
    url: "/studies",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/studies.html",
      }
    }
  })

   .state('app.study', {
    url: "/studies/:studynodeRef",
    views: {
      'menuContent': {
        templateUrl: "templates/rubyonic/overview.html",
      }
    }
  })

以下是我的控制器的一段代码：

$scope.nodeId = $stateParams.studynodeRef;
$scope.collections = [];
$scope.studies = [];

Studies.all().then(function(data) {
                $scope.x = angular.fromJson(data.allProjects);
                $scope.studies = angular.fromJson($scope.x.list);
            });

Studies.fetchCollection($scope.nodeId).then(function(data){
              // $scope.y = angular.fromJson(data.list);
              $scope.collections = angular.fromJson(angular.fromJson(data.list)[0].collections);
              console.log($scope.collections);
              // $scope.$apply();
});

Studies.all（）调用进行http调用的Studies服务。每个研究都有一个唯一的nodeRef，它传递给另一个http调用的Study.fetchCollection。这是研究服务：

.factory('Studies',function($http,$filter,$q){
  return {
    all: function(){
    var deferred = $q.defer();
    $http.get("http://localhost/platform/loginSuccess.json").success(
            function(data){
                // angular.copy(data, studies);
                deferred.resolve(data);
            }
        );
      return deferred.promise;
    },
    fetchCollection: function(collectionId) {
            var deffered = $q.defer();
            $http({
                method: 'post',
                url: 'http://localhost/platform/project/fetch.json',
                params: {
                  'nodeRef': collectionId
                }
            }).success(function(data) {
                deffered.resolve(data);
            });

            return deffered.promise;
        }
};
})

所以我遍历我的menu.html中的集合，这些集合在模板中显示为侧边菜单：

<ion-list>
      <ion-item ng-repeat="collection in collections" nav-clear menu-close ng-click="go('app.studies')" class="item item-icon-left brand-base-text-color">
          <i class="icon ion-ios-paper"></i>
            {{collection.name}}
        </ion-item>
 </ion-list>

我希望每次点击一项研究时菜单列表都会自动更新馆藏。不知道如何做任何帮助将不胜感激

Answer 1

我认为您问题的原因之一可能与此相关（from the docs）：

在状态控制器中，$ stateParams对象只包含在该州注册的参数。所以你不会看到在其他州注册的params，包括祖先。

所以看起来你正试图访问一个你只在其父状态嵌套的子状态上注册的参数。

尝试给你的'menuContent'视图提供自己的控制器，它可以访问你需要的$ stateParam属性。这是一个DEMO，希望能够说明问题：

<强> app.js

app.controller("testCtrl",function($scope){ 

  $scope.objEdit = {};

<强>的index.html

var app = angular.module('plunker', ['ui.router']);


app.controller('AppCtrl', function($scope, $stateParams){
  $scope.foo = 'bar'
  $scope.stateParams = $stateParams;
});

app.config(function($stateProvider, $urlRouterProvider){

  $urlRouterProvider.otherwise('/home');

  $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      template: "<div><div ui-view='menuContent'></div></div>",
      controller: 'AppCtrl',
    })

  .state('app.studies', {
    url: "/studies/:visibleParam",
    views: {
      'menuContent': {
        templateUrl: "studies.html",
        controller: function($scope, $stateParams){
          $scope.stateParams = $stateParams
        }
      }
    }
  })

   .state('app.study', {
    url: "/study/:studynodeRef",
    views: {
      'menuContent': {
        templateUrl: "study.html",
      }
    }
  })
})

<强> studies.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    <ul>
  <li><a ui-sref="app.study({studynodeRef: 'bar'})">app.study({studynodeRef: 'bar'})</a></li>
  <li><a ui-sref="app.studies({visibleParam: 'foo'})">app.studies({visibleParam: 'foo'})</a></li>
</ul> 

    <div ui-view></div> 

    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>

  </body>

</html>

<强> study.html

<h1>Studies (has own controller)</h1>
<p>$scope.stateParams => </p>
<pre>{{stateParams}}</pre>

自动重新加载侧边栏

1 个答案: