Question

我尝试在angularjs项目中设置根作用域，这样我就可以从HTML中的任何位置访问名称（而不是在ng-view中）。

<!DOCTYPE html>
<html lang="en" ng-app="phonecatApp" ng-controller="ApplicationController">

</html>

封装了整个页面

我已经加载了一个名为app.js的js文件，其中包含以下内容;

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.factory('UserService', function(){
    return {
        name : 'Tom'
    };
})

function ApplicationController($scope, UserService){
    $scope.username = UserService.name
}

我试图在index.html中执行以下操作：

<a href="#index" class="nav-item name_p_nav">{{username}}</a>

但它只是空白

编辑：修正错误

Answer 1

你可以尝试这样的事情。更改声明控制器的方式。并且为了使用$ scope变量，你必须声明它，可能你应该收到脚本错误，因为它没有声明，请使用开发人员工具检查浏览器以找出确切的错误。

phonecatApp.controller('ApplicationController',['$scope',function ($scope){
 $scope.username = UserService.name

}]）;

Answer 2

我试图重现问题，我很快创建了一个应用程序，它对我有用！在这里，我发布了我的示例代码，只是看一下。

<html lang="en" ng-app="phonecatApp" ng-controller="ApplicationController">
<head>
    <script src="../Scripts/lib/angular.min.js"></script>
    <script src="../Scripts/Application1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
</head>
<body>
    <a href="#index" class="nav-item name_p_nav">{{username}}</a> 
</body>

脚本：

var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.factory('UserService', function(){
return {
        name : 'Tom'
};
})

function ApplicationController($scope, UserService){
$scope.username = UserService.name
}

访问全局变量

2 个答案: