5

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

/search?fname=&lname= しかし、$rootScope の代わりにどこでも $scope を使用すると、正常に動作します (アラート ウィンドウに URL が適切に表示されます /search?fname=john&lname=player)。$rootScope を詳細に理解するには助けが必要です。ありがとう。

4

2 に答える 2

9

$rootScope代わりに使用できます$scopeが、変数は「グローバル」になり、すべてのコントローラー (複数ある場合) がそれを認識します。

ただし、角度の利点は少し失われます。すべてのモデル ( ae ng-model) は特定の下で作成されます$scopeが、そうではないためです。$rootScope

コントローラーごとに private を定義します$scope。

したがって、両方で 2 つのコントローラーを使用する場合は、変数名を定義できます。

 $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;
};
...

見るFiddle

于 2013-09-20T10:56:35.850 に答える
9

プロトタイプ継承の世界へようこそ。

myCtrl1スコープは から継承します$rootScopeが、このスコープの文字列、整数、ブール値などのプロパティに対して行われた変更は、親スコープのプロパティ ( $rootScope) には影響しません。

基本的に、親スコープのプロパティにアクセスできますが、参照を変更することはできません (オブジェクト タイプの場合)。変更があると、子スコープに新しいプロパティが作成されます。

それを処理する方法については、私のフィドルを参照してくださいhttp://jsfiddle.net/qcUm6/1

これを読むと、すべての疑問が解消されます https://github.com/angular/angular.js/wiki/Understanding-Scopes

于 2013-09-20T11:22:23.517 に答える