范围变量不打印AngularJS

Question

我开始在AngularJS中构建我的第一个单页面应用程序,并且我遇到了一个简单的问题.我希望能够设置范围变量'title'和'subtitle'以在每次用户点击'链接'时更改页眉.在主索引页面上,它应该显示的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标签没有显示范围变量!即使正在设置和记录范围变量,标题中的标题和副标题也是空白的.我在页面加载时或在单击链接时没有在控制台中收到任何错误.我在routeProvider中加载的'templateUrl'也在主容器中的所有部分页面上显示内容.只是标题被破坏了.请帮忙.提前致谢

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.