Question

我正在尝试在AngularJs中动态设置页面标题。我正在使用angular-ui路由器和stateHelper。

所以我在主模板中有这个：

<title ng-bind="pageTitle"></title>

这是在我的ui-router中：

{
    name: 'show',
    url: '/:id',
    title: function($stateParams){
       return 'Showing '+$stateParams.id;
    }
}

然后这个：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams)
{
     //set page title
     if(angular.isFunction(toState.title))
     {
         var callBack = toState.title; //this is the anonymous function
         //I expect the anonymous function to return the title
         $rootScope.pageTitle = callBack;
     }else{
         $rootScope.pageTitle = toState.title;
     }
}

挑战： var callBack = toState.title;

返回一个像这样的字符串“function（$ stateParams）{return'Showing'+ $ stateParams.id;}”

如何执行此功能并同时遵守随其传递的参数dependency injected参数（未知DI数）

注意：我非常害怕eval并且不想使用它：（

Answer 1

可以使用$injector.invoke：

调用具有相关依赖关系的函数

$rootScope.$on('$stateChangeStart', function(event, toState, toParams)
{
     if(angular.isFunction(toState.title) || angular.isArray(toState.title))
     {
         $rootScope.pageTitle = $injector.invoke(toState.title);
     }else{
         $rootScope.pageTitle = toState.title;
     }
}

与任何其他支持DI的功能一样，title应相应注释，可以是a function或an array。

Answer 2

您可以先将$ stateParams注入控制器（$ rootScope。$ on语句中），然后调用

toState.title（$ stateParams）;

顺便说一句，您可以考虑使用更好的解决方案来处理＆＃34;动态标题＆＃34;。检查此项目的使用方式：https://github.com/ngbp/ngbp

如何调用存储为字符串的匿名函数

2 个答案: