我正在使用ng view包含AngularJS部分视图,我想根据包含的视图更新页面标题和h1标题标记.但是,这些都超出了部分视图控制器的范围,所以我不知道如何将它们绑定到控制器中的数据集.

如果是ASP.NETMVC,您可以使用@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>级别定义控制器.

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

您创建SERVICE: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

Javascript相关问答推荐

我可以使用querySelectorAll获取单元格索引吗?

为什么剧作家在导航时会超时?

jest使用useLocate测试自定义挂钩

TypScript:根据共享属性对项目进行分组并为其分配groupID

导入图像与内联包含它们NextJS

自定义帖子类型帖子未显示在网站上

调用SEARCH函数后,程序不会结束

fetch在本地设置相同来源的cookie,但部署时相同的代码不会设置cookie

将数据从strapi提取到next.js,但响应延迟API URL

如何在RTK上设置轮询,每24小时

使用下表中所示的值初始化一个二维数组

Rehype将hashtag呈现为URL

成功完成Reducers后不更新状态

数字时钟在JavaScript中不动态更新

setcallback是什么时候放到macrotask队列上的?

还原器未正确更新状态

Chart.js-显示值应该在其中的引用区域

在开发期间,Web浏览器如何运行&qot;.jsx&qot;文件?

未捕获的运行时错误:调度程序为空

将嵌套数组的元素乘以其深度,输出一个和