Question

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>

我写了一个控制器：

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;
        });
    };
}]);

但它在alertbox中显示url为：/ search？fname =＆amp; lname = 但是当我使用$ scope而不是$ rootScope时，它工作正常（警报窗口正确显示url / search？fname = john＆amp; lname = player）。需要帮助来详细了解$ rootScope。感谢。

Answer 1

您可以使用$rootScope代替$scope，但您的变量将是“全局”，并且所有控制器（如果您有多个控制器）都会看到它。

但角度的优势会稍微失去。因为所有模型（a.e ng-model）都是在特定$scope下创建的，而不是$rootScope

为每个控制器定义私有$scope。

因此，如果您在两者中都使用两个控制器，则可以定义变量名称：

 $scope.data = "AAA";

和其他控制器：

 $scope.data = "BBB";

它们是不同的，因为引用不同的实例（又名控制器）

关于您的问题：

你创建了这一行：

 First Name: <input type="text" ng-model="fname" required>
 Last Name: <input type="text" ng-model="lname" required>

控制器myCtrl1下的

。因此，它不会更新引用$rootScope的{{1}} $scope。

我认为您可以使用myCtrl1通知ng-change有关更改的信息。

添加到HTML：

$rootScope

到控制器：

 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>

参见 Fiddle

Answer 2

欢迎来到原型继承的世界。

您myCtrl1范围继承自$rootScope，但对此范围内的字符串，整数和布尔值等属性所做的任何更改都不会影响父范围属性（$rootScope）。

基本上，您可以访问父作用域的属性，但不能更改其引用（对于对象类型）。任何更改都会导致在子范围上创建新属性。

看看我如何处理它的小提琴http://jsfiddle.net/qcUm6/1

阅读此内容，您的所有疑问都将被清除https://github.com/angular/angular.js/wiki/Understanding-Scopes

为什么我不能使用$ rootScope而不是$ scope？

2 个答案: