如何操縱 <title> AngularJS單頁面應用程序？

Question

我有一個單頁的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> 。

當用戶點擊的各種狀態具有不同的控制器時，如何更新標題？

Answer 1

您可以將一些數據附加到路徑的每個狀態，例如可用於設置頁面標題的值。

.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>

Answer 2

您可以創建一個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 }
   };
});

如何操縱 <title> AngularJS單頁面應用程序？

問題描述

2 個解決方案

解決方案1
0 2016-11-04 04:45:28

解決方案2
0 2016-11-04 04:54:11

如何操縱 <title> AngularJS單頁面應用程序？

問題描述

2 個解決方案

解決方案1 0 2016-11-04 04:45:28

解決方案2 0 2016-11-04 04:54:11

解決方案1
0 2016-11-04 04:45:28

解決方案2
0 2016-11-04 04:54:11