Javascript 更改页面标题标签以匹配页面'；s H1标记在AngularJS中_Javascript_Angularjs

Javascript 更改页面标题标签以匹配页面'；s H1标记在AngularJS中

javascript angularjs

Javascript 更改页面标题标签以匹配页面'；s H1标记在AngularJS中,javascript,angularjs,Javascript,Angularjs,如何根据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中

如何根据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的文本，它需要自动更改标题。

它在文档中

试试这样的

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

您可以在

元素上使用Angular的数据绑定或

当然，要使用数据绑定，您需要在模块/控制器的变量中包含所需的值（例如，

$scope

）。如果该值不是作用域的一部分，Angular无法提供比jQuery或标准JavaScript更好的解决方案（您需要在页面上找到

标记，并以某种方式提取文本）

您可以使用

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


{{title}}
角度.module（'app'，[]）.controller（'demo'，['$scope'，function（$scope）{
$scope.$watch（$scope.title，function（）{
document.title=$scope.title；
});
}]);

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

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>

而

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

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

h1设置相同的模型
以此为例,。当您在该文本框中写入内容时，name
会同时在两个位置进行修改
注意：您应该在MasterController
中为您的Layout
html页面执行此操作。您是否尝试将它们绑定在一起？这就是标题，我需要根据页面上的H1设置标题。这很有效。我发现的唯一一个小警告是，如果页面没有用绑定标题或数据绑定标题修饰的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>

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