Почему я не могу использовать $rootScope вместо $scope?

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

Но он показывает url в alertbox как: /search? Fname=&lname= Но когда я везде использую $scope вместо $rootScope, он работает нормально (окно предупреждений показывает URL правильно / search? Fname=john&lname=player). Нужна помощь, чтобы понять $ rootScope в деталях. Благодарю.

Источник

2 ответа

Решение

Ты можешь использовать $rootScope вместо $scope но ваша переменная будет "глобальной", и все контроллеры (если у вас их больше одного) увидят ее.

Но преимущество угловых будет немного потеряно. Потому что все модели (ае 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 но $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>

к контроллеру:

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

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

увидеть скрипку

Источник

Добро пожаловать в мир наследования прототипов.

Вы myCtrl1 сфера наследуется от $rootScope но любые изменения, внесенные в свойства, такие как строка, целые числа и логические значения в этой области, не влияют на свойства родительской области ($rootScope).

В основном вы можете получить доступ к свойствам родительской области, но вы не можете изменить их ссылку (для типов объектов). Любые изменения приводят к созданию новых свойств в дочерней области.

Посмотрите мою скрипку о том, как справиться с этим http://jsfiddle.net/qcUm6/1

Прочитайте это, и все ваши сомнения будут удалены https://github.com/angular/angular.js/wiki/Understanding-Scopes

Источник
Другие вопросы по тегам