Question

我开始在AngularJS中构建我的第一个单页面应用程序，并且我遇到了一个简单的问题。我希望能够设置范围变量＆＃39; title＆＃39;和＆＃39;副标题＆＃39;每次用户点击“链接”时更改页眉。在主索引页面上，它应该显示的html如下所示：

<div id="header">
    <h1>{{title}}</h1>
    <h3>{{subtitle}}</h3>
</div>

在我正在进行所有路由的app.js文件中，我有多个控制器可以根据url应用。每个控制器看起来像这样：

app.controller('displayCtrl', function($scope, $http) {
    $scope.title = "Machine Profiles";
    $scope.subtitle = "Add, remove, and view data about machines";
    console.log($scope.title);
});

正如您所看到的，我正在向控制台输出我刚设置的变量，它实际上正在显示正确的内容。问题是h1和h3标签没有显示范围变量！即使正在设置和记录范围变量，标题中的标题和副标题也是空白的。我在页面加载时或在单击链接时没有在控制台中收到任何错误。＆＃39; templateUrl＆＃39;我在routeProvider中加载的内容也在主容器中的所有部分页面上显示内容。只是标题被破坏了。请帮忙。提前致谢

Answer 1

<div id="header">之外是ng-view吗？

如果是 - 这意味着<div id="header">超出了displayCtrl的范围。

尝试更新$rootScope而不是$scope。

app.controller('displayCtrl', function($scope, $rootScope, $http) {
    $rootScope.title = "Machine Profiles";
    $rootScope.subtitle = "Add, remove, and view data about machines";   
});

确保<div id="header">位于ng-app内。

Answer 2

请确保您的html页面有角度。

尝试查看此example

您也可以尝试按如下方式重新格式化控制器。 Angular建议使用内联注入注释

app.controller('displayCtrl', ['$scope','$http', function($scope, $http) {
    $scope.title = "Machine Profiles";
    $scope.subtitle = "Add, remove, and view data about machines";
    console.log($scope.title);
}]);

范围变量不打印AngularJS

2 个答案: