Próbuję dynamicznie ustawić tytuł strony przy ładowaniu strony. Oto mój kod:
<!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>
Podejrzewam, że to ustawienie $rootScope.title w run() może zaktualizować tytuł podczas ładowania strony, ale tak się nie dzieje.
Odpowiedzi:
1 dla odpowiedzi № 1To nie działa dla ciebie, ponieważ nadpisujesz całość myApp moduł, gdy deklarujesz kontroler za pomocą angular.module("myApp", []). Jest to składnia settera, jednak potrzebujesz gettera, aby pobrać już utworzony moduł.
Prawidłowy kod to:
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;
}
});
Kolejna rzecz, którą możesz poprawić. Nie potrzebujesz ngBind w przypadku tytułu nie jest konieczne żadne dodatkowe wiązanie. Właśnie ustawiłem document.title:
.run(function() {
document.title = "Angular Learning 1";
});