javascript - 返回动态标题的 $stateParams

Question

单击“计数”页面的链接时，我可以传递路由器参数

$state.go('count', {targetName: object.name})

因为路由器中建立的内容如下所示:

url: '/count/:targetName',

我们使用 UI-Router 中的 data: 选项结合 $state 来动态设置页面标题

<title ng-bind="'Application Name : ' + $state.current.data.pageTitle"></title>

我希望 pageTitle 包含 :targetName。因此，为了做到这一点，我相信我需要在路由器的 data: 属性中设置一个函数。我尝试过这样的事情:

data: {
    pageTitle: function () {
        getTargetName.$inject('$stateParams');
        function getTargetName ($stateParams) {
            return $stateParams.targetName;
        }
    }
}

这根本不允许页面解析。

有什么建议吗？

Answer 1

有a working plunker

让我们拥有这些状态

// this is just a state, with its own pageTitle STRING
.state('home', {
    ...
    data: {
       pageTitle: "Just a home page"
    },
})
// this is a parent state, with URL parameter 'someParam'
// nad pageTitle as a function
.state('parent', {
    ...
    url: "/parent?someParam",
    data: {
        pageTitle: function ($stateParams) {
          return `title with a param ${$stateParams.someParam}`;
        }
    }
})
// and to show that child can change it
.state('parent.child', { 
    ...
    data: {
        pageTitle: "just a child title",
    }
})

要使这行代码正常工作:

<title>The tile is: {{ getTitle() }}  </title>

我们可以将小的评估添加到$rootScope中，但当然，它应该是一些服务......将其视为简化的操作方法:

.run(['$rootScope', '$state', '$stateParams',
  function ($rootScope, $state, $stateParams) {

    $rootScope.getTitle = function(){
      var state = $state.current;
      var params = $stateParams;

      if (state.data
      && state.data.pageTitle) {

        if(typeof (state.data.pageTitle) === "function" ){
          return state.data.pageTitle(params);
        }
        return state.data.pageTitle
      }
      return "no title for this state"
    }
}])

所有这些链接都有不同的标题

<a href="#/home">
<a ui-sref="parent({someParam: 1})">
<a ui-sref="parent({someParam: 'someValue'})">
<a ui-sref="parent.child">

实际检查 here