Question

如何根据我在AngularJS中的页面H1标签动态更改页面的标题标记。

我知道在jQuery中我可以做类似的事情：

var title = $('#content').find('h1').first().text();
if (title.length >= 1)
{
    document.title = 'My Site Name  |  ' + (title);
}
else {
    document.title = 'My Site Name';
}

在AngularJS中完成同样事情的最佳方法是什么？

我宁愿不把它放在app.js中，因为对我而言，将内容 - 可能会改变 - 与代码混合似乎是错误的。如果我在部分视图中编辑H1的文本，则需要自动更改标题。

Answer 1

假设您要将标题绑定到静态h1内容，可以使用以下指令：

var app = angular.module('bindTitle', []);
app.directive('bindTitle', ['$document', function($document) {
  return {
    restrict: 'A',
    link: function(scope, iElement) {
      $document[0].title += ' | ' + iElement.text();
    }
  };
}]);

用法将是：

<html>
<head>
  <title>My Site Name</title>
<head>
<body>
  <h1 bind-title>Your title</h1>
</body>
</html>

并且Your title将在页面加载时附加到页面标题。即My Site Name | Your title

编辑：自动追加h1元素上的标题

var app = angular.module('bindTitle', []);
app.directive('h1', ['$document', function($document) {
  return {
    restrict: 'E',
    link: function(scope, iElement) {
      $document[0].title += ' | ' + iElement.text();
    }
  };
}]);

<h1>元素中的内容将附加到页面标题。

Answer 2

它在文档中，

尝试这样的事情

  angular.module('documentExample', [])
    .controller('ExampleController', ['$scope', '$document', function($scope, $document) {
      $scope.title = $document[0].title;
      $scope.windowTitle = angular.element(window.document)[0].title;
    }]);

http://plnkr.co/edit/rlq032m5KTVLSRMDRHvr?p=preview

Answer 3

您可以将<title>元素上的Angular数据绑定与ng-bind或ng-bind-template一起使用。

当然，您需要在模块/控制器上的变量中使用所需的值（例如，$scope）才能使用数据绑定。如果该值不是范围的一部分，Angular不能提供比jQuery或标准JavaScript更好的解决方案（您需要在页面上找到<h1>标记并以某种方式提取文本无论）。

angular.module('app', [])
.controller('MyCtrl', function($scope) {
    $scope.title = 'My Page';
});

<html ng-app="app" ng-controller="MyCtrl">
<head>
<!-- Direct binding example -->
<title ng-bind="title"></title>

<!-- Or, template example -->
<title ng-bind-template="My Site{{ title.length > 0 ? ' | ' + title : ''}}"></title>

Answer 4

您可以使用$watch更改标题

<body ng-app="app">
    <div ng-controller="demo">
        <h1>{{title}}</h1>
        <input type="text" ng-model="title" />
    </div>
</body>
<script>
angular.module('app', []).controller('demo', ['$scope', function($scope) {
  $scope.$watch($scope.title, function() {
    document.title  = $scope.title;
  });
}]);
</script>

Answer 5

我认为最简单的方法是为您的标题和model

设置相同的h1

以此jsFiddle link为例。当您在该文本框中编写内容时，name会在同一时间在2个位置进行修改。

注意：您应该在MasterController html页面的Layout中执行此操作。

更改页面TITLE标记以匹配AngularJS中页面的H1标记

5 个答案: