mik*_*kel 410 javascript templates partial-views angularjs angular-routing
我使用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"; }
jko*_*ska 633
我刚刚发现了一种设置页面标题的好方法,如果你正在使用路由:
JavaScript的:
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:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title ng-bind="'myApp — ' + title">myApp</title>
...
编辑:使用ng-bind属性而不是curlies,{{}}因此它们不会在加载时显示
Tos*_*osh 340
您可以在<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
bro*_*eib 188
请注意,您也可以使用javascript直接设置标题,即
$window.document.title = someTitleYouCreated;
这没有数据绑定,但是当放入标记有问题时就足够ng-app了<html>.(例如,使用JSP模板,其中<head>只在一个地方定义,但您有多个应用程序.)
小智 119
声明ng-app的上html元件提供根范围两者的head和body.
因此在你的控制器中注入$rootScope并设置一个头属性:
function Test1Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 1"; }
function Test2Ctrl($rootScope, $scope, $http) { $rootScope.header = "Test 2"; }
并在您的页面中:
<title ng-bind="header"></title>
Mar*_*ins 42
模块angularjs-viewhead显示了一种机制,可以仅使用自定义指令在每个视图的基础上设置标题.
它可以应用于其内容已经是视图标题的现有视图元素:
<h2 view-title>About This Site</h2>
...或者它可以用作独立元素,在这种情况下,元素在渲染文档中是不可见的,并且仅用于设置视图标题:
<view-title>About This Site</view-title>
该指令的内容在根作用域中可用viewTitle,因此它可以像title任何其他变量一样用在title元素上:
<title ng-bind-template="{{viewTitle}} - My Site">My Site</title>
它也可以用于任何可以"看到"根范围的其他位置.例如:
<h1>{{viewTitle}}</h1>
此解决方案允许通过用于控制演示文稿其余部分的相同机制设置标题:AngularJS模板.这避免了使用这种表示逻辑使控制器混乱的需要.控制器需要提供将用于通知标题的任何数据,但模板最终确定如何呈现它,并且可以使用表达式插值和过滤器正常绑定到范围数据.
(免责声明:我是这个模块的作者,但我在这里引用它只是希望它能帮助其他人解决这个问题.)
Mr *_*ash 31
这是一个适用于我的解决方案,它不需要将$ 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);
}
Dem*_*tix 15
如果您事先了解标题,jkoreska的解决方案是完美的,但您可能需要根据从资源获得的数据等设置标题.
我的解决方案需要单一服务.由于rootScope是所有DOM元素的基础,因此我们不需要像所提到的那样在html元素上放置控制器
app.service('Page', function($rootScope){
return {
setTitle: function(title){
$rootScope.title = title;
}
}
});
doctype html
html(ng-app='app')
head
title(ng-bind='title')
// ...
app.controller('SomeController', function(Page){
Page.setTitle("Some Title");
});
Ale*_*oka 11
一种干净的方式,允许动态设置标题或元描述.在示例中,我使用ui-router,但您可以以相同的方式使用ngRoute.
var myApp = angular.module('myApp', ['ui.router'])
myApp.config(
['$stateProvider', function($stateProvider) {
$stateProvider.state('product', {
url: '/product/{id}',
templateUrl: 'views/product.html',
resolve: {
meta: ['$rootScope', '$stateParams', function ($rootScope, $stateParams) {
var title = "Product " + $stateParams.id,
description = "Product " + $stateParams.id;
$rootScope.meta = {title: title, description: description};
}]
// Or using server side title and description
meta: ['$rootScope', '$stateParams', '$http', function ($rootScope, $stateParams, $http) {
return $http({method: 'GET', url: 'api/product/ + $stateParams.id'})
.then (function (product) {
$rootScope.meta = {title: product.title, description: product.description};
});
}]
}
controller: 'ProductController'
});
}]);
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title ng-bind="meta.title + ' | My App'">myApp</title>
...
或者,如果您使用的是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.'
}
}
这是另一种方法,其他人在这里没有提到(截至本文撰写时).
您可以使用如下自定义事件:
// your index.html template
<html ng-app="app">
<head>
<title ng-bind="pageTitle">My App</title>
// your main app controller that is declared on the <html> element
app.controller('AppController', function($scope) {
$scope.$on('title-updated', function(newTitle) {
$scope.pageTitle = newTitle;
});
});
// some controller somewhere deep inside your app
mySubmodule.controller('SomeController', function($scope, dynamicService) {
$scope.$emit('title-updated', dynamicService.title);
});
这种方法的优点是不需要编写额外的服务,然后注入每个需要设置标题的控制器,也不会(ab)使用$rootScope.它还允许您设置动态标题(如代码示例中所示),这在路由器的配置对象上使用自定义数据属性是不可能的(据我所知).
对于您没有包含title标签的ngApp的方案，只需将服务注入需要设置窗口标题的控制器即可。
var app = angular.module('MyApp', []);
app.controller('MyController', function($scope, SomeService, Title){
var serviceData = SomeService.get();
Title.set("Title of the page about " + serviceData.firstname);
});
app.factory('SomeService', function ($window) {
return {
get: function(){
return { firstname : "Joe" };
}
};
});
app.factory('Title', function ($window) {
return {
set: function(val){
$window.document.title = val;
}
};
});
工作示例... http://jsfiddle.net/8m379/1/
小智 5
如果您无法控制title元素(如asp.net Web表单),可以使用以下内容
var app = angular.module("myApp")
.config(function ($routeProvider) {
$routeProvider.when('/', {
title: 'My Page Title',
controller: 'MyController',
templateUrl: 'view/myView.html'
})
.otherwise({ redirectTo: '/' });
})
.run(function ($rootScope) {
$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
document.title = currentRoute.title;
});
});
| 归档时间： |
|
| 查看次数： |
249405 次 |
| 最近记录： |