我正在尝试在页面加载时动态设置页面标题。这是我的代码:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" charset="utf-8" />
<title ng-bind="title"></title>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body style="font-family:sans-serif" ng-controller="clicks">
<h1>Hello <span ng-cloak class="ng-cloak">{{ user.name }}</span></h1>
<input type="text" ng-model="user.name" placeholder="Enter a name here" >
<h2>Clicked {{ counter.clicks }} times</h2>
<button ng-click="count()" >Click</button>
<script src="vendor/angular/angular.js"></script>
<script>
angular.module("myApp", ["myApp.controllers"]);
angular.module("myApp")
.run(function($rootScope) {
$rootScope.title = "Angular Learning 1";
});
angular.module("myApp", [])
.controller("clicks", function($scope) {
$scope.user = {
name: "Sithu"
}
$scope.counter = { clicks: 0 };
$scope.count = function() {
$scope.counter.clicks += 1;
}
});
</script>
</body>
</html>
我认为在 run() 中设置 $rootScope.title 可以更新页面加载中的标题，但事实并非如此。
最佳答案
它对您不起作用，因为当您使用 angular.module("myApp", []) 声明 Controller 时，您会覆盖整个 myApp 模块。这是 setter 语法，但是您需要 getter 来检索已创建的模块。
正确的代码是:
angular.module("myApp")
// Note no [] here --^
.controller("clicks", function($scope) {
$scope.user = {
name: "Sithu"
}
$scope.counter = {
clicks: 0
};
$scope.count = function() {
$scope.counter.clicks += 1;
}
});
另一件事你可以改进。您不需要 ngBind 作为标题，也不需要再进行一次绑定(bind)。只需设置document.title:
.run(function() {
document.title = "Angular Learning 1";
});
关于javascript - 如何在 AngularJS 中动态设置页面加载的标题标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29592283/