如何动态设置一个Angular JS页面的Title？

Question

我有一个运行 single-page AngularJS Web 应用程序。为了管理我的路线，我使用 ui.router。这是我的启动画面的状态：

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

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

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

Answer 1

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

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页面的Title？

How to dynamically set an Angular JS page's Title?

javascript

angularjs

meta-tags