HTML 文件是这样的:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>HTTP Request</title>
<script src="angularjs"></script>
<script src="appjs"></script>
</head>
<body>
<div ng-controller="myCtrl1">
First Name: <input type="text" ng-model="fname" required>
Last Name: <input type="text" ng-model="lname" required>
<button ng-click="search()">Send HTTP Request</button>
<p>Searching for : {{fname}} {{lname}}</p>
<p>Response Status: </p>
<p>{{status}}</p>
<p>Data: {{data}}</p><br>
<p>Total number of results : {{data.numResults}}</p>
</div>
</body>
</html>
我写了一个 Controller :
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl1', ['$rootScope', '$http', function($rootScope, $http) {
$rootScope.fname = "";
$rootScope.lname="";
$rootScope.search = function() {
var search_url = "/search?fname=" + $rootScope.fname + "&lname=" + $rootScope.lname;
alert (search_url);
// alert("/search?fname=" + $scope.fname + "&lname=" + $scope.lname);
$http({method:'GET', url:search_url})
.success(function(data, status, headers, config) {
$rootScope.status = status;
$rootScope.data = data;
$rootScope.headers = headers;
$rootScope.config = config;
});
};
}]);
但它在警报框中显示 url 为:/search?fname=&lname=
但是当我在任何地方都使用 $scope 而不是 $rootScope 时，它可以正常工作(警报窗口正确显示 url/search?fname=john&lname=player)。
需要帮助以详细了解 $rootScope。谢谢。
最佳答案
您可以使用 $rootScope而是 $scope但是您的变量将是“全局的”，并且所有 Controller (如果您有多个 Controller )都会看到它。
但是 Angular 的优势会丢失一点。因为所有模型(a.e ng-model )都将在特定的 $scope 下创建但不是 $rootScope
为每个 Controller 定义私有(private) $scope .
因此，如果您同时使用两个 Controller ，则可以定义变量名称:
$scope.data = "AAA";
在其他 Controller 中:
$scope.data = "BBB";
它们是不同的，因为引用不同的实例(又名 Controller )
关于您的问题:
您创建了以下行:
First Name: <input type="text" ng-model="fname" required>
Last Name: <input type="text" ng-model="lname" required>
在 Controller 下
myCtrl1 .因此它不会更新您的$rootScope但是 $scope指myCtrl1 .我想你可以使用
ng-change通知 $rootScope关于改变。添加到 HTML:
First Name: <input type="text" ng-model="fname" ng-change ="onfnameChange(fname)" required>
Last Name: <input type="text" ng-model="lname" ng-change ="onlnameChange(lname)" required>
到 Controller :
...
$scope.onfnameChange = function(val){
$rootScope.fname = val;
};
$scope.onlnameChange = function(val){
$rootScope.lname = val;
};
...
见 Fiddle
关于angularjs - 为什么我不能使用 $rootScope 而不是 $scope？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18914795/