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

发布时间：2020-12-17 09:31:12 所属栏目：安全来源：网络整理

导读：我使用ng-view包括AngularJS部分视图，我想根据包含的视图更新页面标题和h1标题标签。这些超出了部分视图控制器的范围，所以我不知道如何绑定到控制器中的数据集。如果是ASP.NET MVC，你可以使用@ViewBag来做到这一点，但我不知道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"; }

您可以在水平。

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

您创建服务：从控制器页面和修改。

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

从控制器注入页面和调用’Page.setTitle()’。

这里是具体的例子：http://plnkr.co/edit/0e7T6l

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!