javascript 如何使用 angular.js 在标题元素中绑定数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18155394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bind data in title element using angular.js
提问by jcubic
I'm learning Angular.js and I set <title>{{title}}</title>and I try to change that using select element
我正在学习 Angular.js 并设置<title>{{title}}</title>并尝试使用 select 元素更改它
<select ng-model="user.title">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
I try ng-changeand ng-selectwith set()
我试着ng-change和ng-select用set()
function ctrl($scope) {
$scope.title = 'hello'; // this set the title
$scope.set = function() {
$scope.title = $scope.user.title; // this not
};
}
THe function don't work, but it work when I just set it without a function.
该功能不起作用，但是当我在没有功能的情况下设置它时它可以工作。
I also try to create change directive:
我还尝试创建更改指令：
app.directive('change', function() {
console.log('change');
return {
link: function(scope, element, attrs) {
console.log(arguments);
element[0].onChange = function() {
scope[attrs[0]]();
};
}
};
});
but this too don't work. Console.log don't execute at all.
但这也行不通。Console.log 根本不执行。
采纳答案by madhead
Everything should work fine without extra code:
没有额外的代码，一切都应该可以正常工作：
<html data-ng-app="app">
<head>
<title>{{title}}</title>
</head>
<body>
{{title}}
<select ng-model="title">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</body>
</html>
And that's all. Here is a pen.
就这样。这是一支笔。
回答by CSharp
When dealing with the title tag you should use ng-bind-templateso you don't see the expression in its raw state {{someVar}}before Angular has a chance to kick in. You can add the initial text of the title within the title tag and it will be overwritten by your template.
在处理标题标签时，您应该使用ng-bind-template以便{{someVar}}在 Angular 有机会启动之前您看不到原始状态的表达式。您可以在标题标签中添加标题的初始文本，它将被您的模板覆盖。
<html data-ng-app="app">
<head>
<title ng-bind-template="My App - {{title}}">My App - Default Title</title>
</head>
<body>
{{title}}
<select ng-model="title">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</body>
</html>
回答by Mike Bazhenov
Use $rootScope
使用 $rootScope
.when('/', {
templateUrl: '/templates/page/home.html',
controller: ['$scope','$rootScope', function ($scope,$rootScope) {
$rootScope.title = 'Учитель24.рф';
}]});
回答by PythonDev
I figured out one solution to set title in <title>tag.
我想出了一种在<title>标签中设置标题的解决方案。
main.js :
主.js :
app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when("/faq", {
controller: "MYCtrl",
templateUrl: "../assets/templates/faq.html",
title: "FAQ"
});
}]);
app.run(['$location', '$rootScope', function( $location, $rootScope ){
$rootScope.$on("$routeChangeSuccess", function(event, currentRoute, previousRoute) {
$rootScope.title = currentRoute.title;
});
}]);
application.html.erb:
application.html.erb：
<title ng-bind="'MYAPP - ' + $root.title"></title>
<title ng-bind="'MYAPP - ' + $root.title"></title>
回答by zs2020
Since @madhead gave you an awesome answer, I just want to shed some light on your question about why your code doesn't work.
既然@madhead 给了你一个很棒的答案，我只想解释一下你的问题，为什么你的代码不起作用。
You can definitely use ng-change, please take a look at this code. Your approach is very close, and I guess maybe you missed something?
你绝对可以使用ng-change，请看一下这段代码。您的方法非常接近，我想您可能错过了什么？
<ul ng-app="myapp" ng-controller="MainCtrl">
<div>{{title}}</div>
<select ng-model="user.title" ng-change="set()">
<option value="Lorem">Lorem</option>
<option value="Ipsum">Ipsum</option>
<option value="Dolor">Dolor</option>
</select>
</ul>
function MainCtrl($scope) {
$scope.set = function () {
$scope.title = $scope.user.title;
};
}
I want to point out one thing.If you test in jsfiddle, don't use <title>{{title}}</title>, use <div>{{title}}</div>instead. Somehow titletag will not show correctly in the demo window.
我想指出一件事。如果您在 jsfiddle 中进行测试，请不要使用<title>{{title}}</title>，<div>{{title}}</div>而是使用。不知何故，标题标签不会在演示窗口中正确显示。
