Question

我正在尝试使用父状态/视图来访问子状态/视图。我正在寻找一种解决方法。

我的状态提供程序配置如下：

.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-view div中，则为未定义。

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

有人可以提供解决方法吗？

Answer 1

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

我假设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视图中，则它是未定义的

1 个答案: