Question

我正在尝试使用Angular创建单页应用程序，我想根据视图动态更改页面标题。我尝试使用指令来完成它，如下面的代码所示：

<!-- index.html !-->

<html ng-app="MyApp">
<head>
    <page-title></page-title>         <!-- ....................LINE 1   !-->
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js">
    </script>
    <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.js">
    </script>
    <script type="text/javascript"
        src="/js/index.js">
    </script>
</head>

<body>
        <nav-bar></nav-bar>
        <div ng-view></div>
        ...

以下是我的指令代码：

app.directive('pageTitle', function() {
   return {
      controller: 'titleController',
      template: '<title>{{ page.title }}</title>'  //.............LINE 2
   }
});

标题正在按预期变化。除了<head>标签内的任何代码现在都在包含标题，样式和脚本标签的主体内部移动之外，一切都运行得很好。这对SEO不利。我搜索了这个问题并找到了一些替代解决方案，以便在this链接上执行相同的操作，但不是对此异常的确切解决方案和解释。我甚至尝试更改 LINE 1 和 LINE 2 ，如下所示：

<title><page-title></page-title></title>    << LINE 1

template: '{{ page.title }}'                << LINE 2

这让人更加意想不到。它根本不会更改标题，而是直接在每个页面的标题上打印<page-title></page-title>，就像没有为<page-title>标记定义指令一样。我想要对Angular中的这两个异常进行一些解释。：（

Answer 1

不确定如何定义页面标题，但您可以在这些行中执行某些操作并在stateProvider中定义页面标题

app.config(['$stateProvider', '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        data: {
          pageTitle: 'Home'
        }
      })
      .state('about', {
        url: '/about',
        templateUrl: 'about.html',
        data: {
          pageTitle: 'About'
        }
      })
      .state('credits', {
        url: '/credits',
        templateUrl: 'credits.html',
        data: {
          pageTitle: 'Credits'
        }
      });
  }
]);

至于你的指示

app.directive('pageTitle', ['$rootScope', '$timeout',
  function($rootScope, $timeout) {
    return {
      link: function(scope, element) {

        var listener = function(event, toState) {

          var title = 'Default Title';
          if (toState.data && toState.data.pageTitle) title = toState.data.pageTitle;

          $timeout(function() {
            element.text(title);
          }, 0, false);
        };

        $rootScope.$on('$stateChangeSuccess', listener);
      }
    };
  }
]);

然后您的页面标题标记为<title page-title></title>

使用您的给定文字设置element.text会将其排序为您刚刚使用模板定义新标记。

Angular意外地移动了正文中的标题标记

1 个答案: