AngularJS 如何在页面加载时动态设置标题标签？

Question

我正在尝试在页面加载时动态设置页面标题。这是我的代码：

<!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 可以在页面加载时更新标题，但它不会。

Answer 1

它对您不起作用，因为当您使用 angular.module("myApp", []) 声明控制器时，您会覆盖整个 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 ，不需要再绑定一个。只需设置 document.title:

.run(function() {
    document.title = "Angular Learning 1";
});

AngularJS 如何在页面加载时动态设置标题标签？

How to dynamically set title tag on page load in AngularJS?

javascript

angularjs

angularjs-directive

angularjs-scope