Question

我正在开发angularjs网站，但我的标题标签有问题当我从一个页面移动到另一个页面时它没有更新。但只有当我重新加载页面时，它才会被更改。这里是我的标题标签内容来自php变量：

<title><?php echo $meta_title; ?></title>

我试图添加此指令

app.directive('updateTitle', ['$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 update-title><?php echo $meta_title; ?></title> 但它不起作用！有没有办法让angularjs更新或刷新此标签而无需重新加载页面？

Answer 1

只需加入$window服务即可使用。

$window.document.title = 'My new title';

例如：

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

                var listener = function (event, toState) {

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

                    $timeout(function () {
                        $window.document.title = title;
                    }, 0, false);
                };

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

我已经为同一个编写了一个简单的指令，即根据当前加载的视图更新标题。

https://github.com/sagrawal14/angular-extras/blob/master/src/directives/page/title.directive.js

您可以在HTML中的任何位置使用此指令来更新标题。所以你的标题不是绑定到Javascript代码，而是依赖于HTML。（分离关注）

Answer 2

检查以下代码

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

        var listener = function(event, toState) {
$window.document.title = 'My new title';
          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);
      }
    };
  }
]);

如何使用angularjs

2 个答案: