关于javascript：如何根据AngularJS局部视图动态更改标题？


How to dynamically change header based on AngularJS partial view?

我正在使用ng-view包含angularjs部分视图，我想基于包含的视图更新页面标题和h1标题标记。但是这些超出了部分视图控制器的范围，因此我无法确定如何将它们绑定到控制器中的数据集。

如果是ASP.NET MVC，您可以使用@viewbag来完成这项工作，但我不知道AngularJS中的等效项。我搜索过共享服务、事件等，但仍然无法使其正常工作。任何方法来修改我的例子，使其有效将是非常感谢。

我的HTML：

1
2
3
4
5
6
7
8
9
10
11
12
<html data-ng-app="myModule">
<head>
<!-- include js files -->
<!-- should changed when ng-view changes -->
</head>
<body>
<!-- should changed when ng-view changes -->



</body>
</html>

我的JavaScript：

1
2
3
4
5
6
7
8
9
10
11
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"; }
相关讨论

我发现了一个很好的方法来设置你的页面标题，如果你正在使用路由：

JavaScript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var myApp = angular.module('myApp', ['ngResource'])

myApp.config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
            title: 'Home',
            templateUrl: '/Assets/Views/Home.html',
            controller: 'HomeController'
        });
        $routeProvider.when('/Product/:id', {
            title: 'Product',
            templateUrl: '/Assets/Views/Product.html',
            controller: 'ProductController'
        });
    }]);

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

HTML：

1
2
3
4
5
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="'myApp &mdash; ' + title">myApp
...

编辑：使用ng-bind属性而不是curlies {{}}，这样它们就不会在加载时显示。

相关讨论