Why can't I use $rootScope instead of $scope?

StackOverflow https://stackoverflow.com/questions/18914795

문제

HTML file is this :

   <!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>

I have written a controller as :

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

But it shows url in alertbox as : /search?fname=&lname= But when I use $scope everywhere instead of $rootScope, it works fine (alert window shows url properly /search?fname=john&lname=player). Need help to understand $rootScope in details. Thanks.

도움이 되었습니까?

해결책

You can use $rootScope instead $scope but your variable will be "global" and all controllers (if you have more then one) will see it.

But advantage of angular will be lost a bit. Because all models (a.e ng-model) will be created under specific $scope but not $rootScope

For each controller define private $scope.

so if you use two controllers in both you can define the variable name:

 $scope.data = "AAA";

and in other controller:

 $scope.data = "BBB";

they are different because refer to different instances (aka controllers)

about your problem:

you created this lines:

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

under controller myCtrl1. therefore it will not update your $rootScope but $scope that refers to myCtrl1.

I think you can use ng-change to notify $rootScope about change.

add to 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>

to controller:

...
 $scope.onfnameChange = function(val){
   $rootScope.fname = val;
 };

$scope.onlnameChange = function(val){
  $rootScope.lname = val;
};
...

see Fiddle

다른 팁

Welcome to the world of prototypal inheritance.

You myCtrl1 scope inherits from $rootScope but any changes done on properties like string, integers and boolean on this scope would not affect the parent scope properties ($rootScope).

Basically you can access the properties of parent scope but you cannot change their reference (for object types). Any changes cause new properties being created on the child scope.

See my fiddle on how to handle it http://jsfiddle.net/qcUm6/1

Read this and all your doubts would be cleared https://github.com/angular/angular.js/wiki/Understanding-Scopes

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top