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

Question

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

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

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

但是，我希望标题是动态的，而不是静态的。我想在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 ');
}]);