如果 $stateParams 字段不在其对应的 ui-view 内，则该字段未定义

Question

我正在尝试让 parent state/view 访问 child state/view。我正在寻找解决方法。

我的状态提供者配置如下：

.state('advertisement', {
    url: '/advertisement', abstract: true, parent: 'authenticated'
})
.state('advertisement.new', {
    url: '/new',
    abstract: true,
    views: {
        '@': {
            controller: 'AdvertisementSaveCtrl',
            templateUrl: 'advertisement/views/advertisement.form.html'
        }
    }
})
.state('advertisement.new.field', {
    url: '/:fieldId',
    views: {
        '@advertisement.new': {
            templateUrl: function ($stateParams){
                return 'advertisement/views/fields/advertisement.' + $stateParams.fieldId + '.html';
            }
        }
    }
})

在我的标记中：

<li ui-sref-active="active" ng-class="{'active': isActive()}"><!-- not in scope! -->
<div ui-view></div><!-- this is the view targeted by advertisement.new.field -->

advertisement.new.field状态根据当前字段（:fieldId）变化。我已经设置了一些链接（位于我的嵌套 ui-view 的外部），它们通过更改 :fieldId 状态参数来改变状态，但显然， $stateParam.fieldId如果不在对应的ui-viewdiv.

内则为undefined

换句话说，isActive 方法似乎无法访问 to $stateParam.fieldId...

任何人都可以提供解决方法吗？

Answer 1

在您的代码示例中，我没有看到在哪个控制器中定义了 isActive() 方法。但是必须在controller中定义。

我假设 isActive() 函数是在名为 MainController 的控制器上定义的。然后你可以在这个控制器中注入 $state 服务，通过 $state.params 你甚至可以在 <ui-view> 标签之外访问活动状态的参数：

app.controller('MainController', function ($scope, $state) {
      console.log($stateParams);

      this.isActive = function() {
          // access params of active state via $state.params
          console.log($state.params.fieldId);
      };
  });

如果 $stateParams 字段不在其对应的 ui-view 内，则该字段未定义

$stateParams field is undefined if not located within its corresponding ui-view

angularjs

angular-ui-router