如何动态设置Angular JS页面的标题?

问题描述

我有一个正在运行的单页AngularJS Web应用程序.要管理我的路线，我正在使用 ui.router .这是我的启动画面的状态:

I have a running single-page AngularJS Web Application. To manage my routes, I'm using ui.router. Here is the state for my Splash Screen:

  $stateProvider.state('splash',
      {
          url: '/',
          templateUrl: 'html/splash.html',
          controller: 'SplashCtrl',
          data: {
              meta: {
                'title': 'Splash Screen'
              }
          }
      }
  );

您是否注意到此状态包含一个data.meta对象?那是因为我正在使用 ngMeta 来填充页面的<title></title>标记.一切正常.

Did you notice that this state contains a data.meta object? That's because I'm using ngMeta to populate the page's <title></title> tag. Everything works.

但是，我希望标题是动态的，而不是静态的.我想在SplashCtrl中设置/调整它.但是我不知道该怎么做.有人可以告诉我吗?在HTML模板中，我这样处理:<title>{{ngMeta.title}}</title>

However, I want to the title to be dynamic, not static. I want to set/adjust it in the SplashCtrl. But I don't know how to do that. Can someone show me? In the HTML template, I address it like this: <title>{{ngMeta.title}}</title>

推荐答案

您可以在控制器中注入ng-meta，然后按如下所示动态设置meta标签

You can inject ng-meta in your controller and then set meta tags dynamically as below

app.controller('YourController',["$scope", "ngMeta",function ($scope,ngMeta) {
    ngMeta.setTitle('Home page');
    ngMeta.setTag('description', 'This is the home page');
    ngMeta.setTag('keywords', 'angular,stack,nodejs');
    ngMeta.setTag('author', 'Tony ');
}]);

这篇关于如何动态设置Angular JS页面的标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！