如何基于AngularJS部分视图动态更改标头？

JavaScript

西里小哥

2020-03-17

我正在使用ng-view来包含AngularJS部分视图，并且我想根据所包含的视图来更新页面标题和h1标头标签。但是，这些超出了部分视图控制器的范围，因此我无法弄清楚如何将它们绑定到控制器中的数据集。

如果是ASP.NET MVC，则可以使用@ViewBag进行此操作，但是我不知道AngularJS中的等效方法。我已经搜索了有关共享服务，事件等的信息，但仍然无法正常运行。任何修改我的示例使其可行的方法将不胜感激。

我的HTML：

<html data-ng-app="myModule">
<head>
<!-- include js files -->
<title><!-- should changed when ng-view changes --></title>
</head>
<body>
<h1><!-- should changed when ng-view changes --></h1>

<div data-ng-view></div>

</body>
</html>

我的JavaScript：

var myModule = angular.module('myModule', []);
myModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/test1', {templateUrl: 'test1.html', controller: Test1Ctrl}).
        when('/test2', {templateUrl: 'test2.html', controller: Test2Ctrl}).
        otherwise({redirectTo: '/test1'});
}]);

function Test1Ctrl($scope, $http) { $scope.header = "Test 1"; 
                                  /* ^ how can I put this in title and h1 */ }
function Test2Ctrl($scope, $http) { $scope.header = "Test 2"; }

第1856篇《如何基于AngularJS部分视图动态更改标头？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
前端小哥 2020.03.17

我发现更好，更动态的解决方案是使用$ watch跟踪变量更改，然后更新标题。

斯丁村村 2020.03.17

感谢Tosh shimayama的解决方案。
我认为直接将服务放入并不是很干净$scope，因此这是我的一点改动：http : //plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

控制器（在我的原始回答中似乎有点愚蠢）创建了一个ActionBar对象，并将其填充到$ scope中。
该对象负责实际查询服务。它还从$ scope中隐藏了设置模板URL的调用，而其他控制器可以使用该调用来设置URL。

小宇宙神乐 2020.03.17

angularjs-viewhead模块展示了一种仅使用定制指令就每个视图设置标题的机制。

它可以应用于内容已经是视图标题的现有视图元素：

<h2 view-title>About This Site</h2>

...或者它可以用作独立元素，在这种情况下，该元素将在呈现的文档中不可见，并且仅用于设置视图标题：

<view-title>About This Site</view-title>

该伪指令的内容在根作用域中作为可用viewTitle，因此它可以像其他任何变量一样在title元素上使用：

<title ng-bind-template="{{viewTitle}} - My Site">My Site</title>

也可以在可以“看到”根范围的任何其他位置使用它。例如：

<h1>{{viewTitle}}</h1>

该解决方案允许通过用于控制演示文稿其余部分的相同机制来设置标题：AngularJS模板。这避免了使用此表示逻辑使控制器混乱的需求。控制器需要提供将用于通知标题的任何数据，但是模板将最终确定如何显示标题，并且可以正常使用表达式插值和过滤器绑定到范围数据。

（免责声明：我是该模块的作者，但我在此引用它只是希望它可以帮助其他人解决此问题。）

理查德泡芙 2020.03.17

请注意，您还可以直接使用javascript设置标题，即

$window.document.title = someTitleYouCreated;

它没有数据绑定，但是在放入标签有问题时就足够ng-app了<html>。（例如，使用<head>仅在一个位置定义的JSP模板，但您拥有多个应用程序。）

Harry古一 2020.03.17

ng-app在html元素上声明可为head和提供根范围body。

因此，在控制器中注入$rootScope并在其上设置标头属性：

function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; }

function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; }

并在您的页面中：

<title ng-bind="header"></title>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android