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

一尘不染

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

angularjs

我正在使用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"; }

阅读 231

2020-07-04

共1个答案

一尘不染

您可以在<html>级别上定义控制器。

 <html ng-app="app" ng-controller="titleCtrl">
   <head>
     <title>{{ Page.title() }}</title>
 ...

您创建服务：Page并从控制器进行修改。

myModule.factory('Page', function() {
   var title = 'default';
   return {
     title: function() { return title; },
     setTitle: function(newTitle) { title = newTitle }
   };
});

Page从控制器注入并调用“ Page.setTitle（）”。

这是具体示例：http :
//plnkr.co/edit/0e7T6l

2020-07-04