如何动态改变头部基于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"; }

当前回答

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

2014-12-31 02:38:57

其他回答

感谢岛山托什的解决方案。我认为直接将服务放入$作用域不太干净，因此这里是我对它的轻微更改:http://plnkr.co/edit/QJbuZZnZEDOBcYrJXWWs

控制器(在最初的回答中，我觉得有点太笨了)创建了一个ActionBar对象，这个对象被填充到$scope中。对象负责实际查询服务。它还从$作用域中隐藏了设置模板URL的调用，而其他控制器可以使用该调用来设置URL。

2013-03-06 17:08:10

这是一个适合我的解决方案，它不需要注入$rootScope到控制器中设置资源特定的页面标题。

在主模板中:

<html data-ng-app="myApp">
    <head>
    <title data-ng-bind="page.title"></title>
    ...

在路由配置中:

$routeProvider.when('/products', {
    title: 'Products',
    templateUrl: '/partials/products.list.html',
    controller: 'ProductsController'
});

$routeProvider.when('/products/:id', {
    templateUrl: '/partials/products.detail.html',
    controller: 'ProductController'
});

在运行块中:

myApp.run(['$rootScope', function($rootScope) {
    $rootScope.page = {
        setTitle: function(title) {
            this.title = title + ' | Site Name';
        }
    }

    $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
        $rootScope.page.setTitle(current.$$route.title || 'Default Title');
    });
}]);

最后在控制器中:

function ProductController($scope) {
    //Load product or use resolve in routing
    $scope.page.setTitle($scope.product.name);
}

2013-07-27 13:19:01

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

$window.document.title = someTitleYouCreated;

这没有数据绑定，但当把ng-app放在<html>标签有问题时，它就足够了。(例如，使用JSP模板，其中<head>仅在一个位置定义，但您有多个应用程序。)

2013-01-28 15:18:55

或者，如果你使用ui-router:

index . html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title ng-bind="$state.current.data.title || 'App'">App</title>

路由

$stateProvider
  .state('home', {
      url: '/',
      templateUrl: 'views/home.html',
      data: {
        title: 'Welcome Home.'
      }
  }

2014-07-25 21:28:13

Hash先生给出了迄今为止最好的答案，但下面的解决方案增加了以下好处，使其(对我来说)更理想:

没有手表，这会让事情变慢实际上自动化了我在控制器中所做的如果我想要，仍然可以从控制器访问它。无需额外注射

在路由器中:

  .when '/proposals',
    title: 'Proposals',
    templateUrl: 'proposals/index.html'
    controller: 'ProposalListCtrl'
    resolve:
      pageTitle: [ '$rootScope', '$route', ($rootScope, $route) ->
        $rootScope.page.setTitle($route.current.params.filter + ' ' + $route.current.title)
      ]

在运行块中:

.run(['$rootScope', ($rootScope) ->
  $rootScope.page =
    prefix: ''
    body: ' | ' + 'Online Group Consensus Tool'
    brand: ' | ' + 'Spokenvote'
    setTitle: (prefix, body) ->
      @prefix = if prefix then ' ' + prefix.charAt(0).toUpperCase() + prefix.substring(1) else @prifix
      @body = if body then ' | ' + body.charAt(0).toUpperCase() + body.substring(1) else @body
      @title = @prefix + @body + @brand
])

2014-08-23 19:33:07

如何动态改变头部基于AngularJS的部分视图?

推荐文章

最新文章

标签