如何操作<title>AngularJS单页应用程序？

我有一个单页AngularJS应用程序。index.html文件如下所示:

<html ng-app="myApp" ng-controller="MyCtrl as myctrl">
  <head>
    <link rel="stylesheet" href="my-style-sheet.css">
    <title>{{myctrl.title}}</title>
  </head>
  <body>
    <div class="container">
      <ol>
        <li><a ui-sref="stateA">StateA</a></li>
        <li><a ui-sref="stateB">StateB</a></li>
      </ol>
      <div ui-view></div>
    </div>
    <script src="my-app.js"></script>
  </body>
</html>

当用户单击StateA或StateB链接时，页面将显示这些页面的内容，而不是<div ui-view></div>。棒极了。

当用户单击四周时，显示的内容发生变化。我也需要更改页面的标题。目前它从控制器MyCtrl获得的标题如下:<title>{{myctrl.title}}</title>。但是当用户单击这些链接时，这些状态都有自己的控制器。所以我不能使用<title>{{myctrl.title}}</title>。

当用户点击不同的状态有不同的控制器时，我如何更新标题?

你可以给路由的每个状态附加一些数据，比如一个可以用来设置页面标题的值。

.state('test', {
    url: '/test',
    templateUrl: '/templates/test.html',
    data: {
        title: 'test title'
    }
})

然后写一个指令来读取标题。您可以检查所需的数据是否可用，并将整个事情附加到$stateChangeSuccess事件。

function dynamicTitle($rootScope, $timeout) {
    return {
        link: function(scope, el) {
            $rootScope.$on('$stateChangeSuccess', function(event, toState) {
                var title = (toState.data && toState.data.title) 
                    ? toState.data.title 
                    : 'Default title';
                $timeout(function() {
                    el.text(title);
                }, 0, false);
            };);
        }
    };
}
angular.module('myApp').directive('dynamicTitle', dynamicTitle);

并将其附加到<title>

<title dynamic-title></title>

你可以创建一个AngularJS工厂，注入它，并通过从控制器调用'Title.setTitle()'来修改它

 <html ng-app="app" ng-controller="Ctrl">
   <head>
     <title>{{ Title.title() }}</title>
  app.factory('Title', function() {
   var title = 'Hello';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

相关内容

最新更新

热门标签：