Angular uiRouter 从数据库文档中设置页面标题

Question

我正在尝试在我的 Angular 应用中动态设置页面标题。

我已经让它根据状态动态改变硬编码标题

.state('faq-detail', {
    url: '/faqs/:faqId',
    templateUrl: 'client/faq/faq-detail.view.ng.html',
    controller: 'FaqListCtrl',
    data: {
      title: 'Faq details'
    }
  });

但我想获得，在这种情况下是问题标题，并将其作为页面标题。

问题来自 mongo 数据库，我正在使用 angular-meteor。

.state('faq-detail', {
    url: '/faqs/:faqId',
    templateUrl: 'client/faq/faq-detail.view.ng.html',
    controller: 'FaqListCtrl',
    data: {
      title: Faq.findOne({_id: $stateParams.faqId}).question
    },
    resolve: {
      theFaq: function ($meteor, $stateParams) {
        return $meteor.subscribe('faq').then(function () {
          return Faq.findOne({_id: $stateParams.faqId});
        });
      }
    }

我已经尝试过了，但您可能知道，$stateParams 在data.title 区域中不受威胁。

我尝试过的另一种方法是：

// ATEMPT TO SET THE TITLE DYNAMICALLY WITH THE QUESTION
$scope.autorun(() => {
  console.log($scope.getReactively('theFaq'));
  if ($scope.theFaq) {
    let faqTitle = $scope.getReactively('theFaq').question;
    // $state.get('faq-detail').data.title = faqTitle;
    $state.current.data.title = faqTitle;
  }
});

但是在我用同一个控制器加载另一个视图之后，这反而设置了标题。所以现在我有了上次访问视图的标题，而不是当前视图。

问题

如何从 angular-meteor 中的 mongo 集合返回的对象键值设置页面标题？

Answer 1

对我来说，实现你想要的最简洁的方法是在你的控制器中完成它。例如：

angular.module('mymodule').controller('FaqListCtrl', function($stateParams, $window){
    let title = Faq.findOne({_id: $stateParams.faqId}).question;
    $window.document.title = title;
})