web-dev-qa-db-ja.com

angular.jsのコントローラー間で変数を共有する

angularが初めてで、angularのコントローラー間で変数を共有する方法を知りたいのですが、次のスクリプトを使用しています-

Main.jsの場合：

function MainCntl($scope) {
  ---code
}

function SearchCtrl($scope, $http) {
    $scope.url = 'http://10.0.0.13:9000/processAdHoc';
    $scope.errorM = "No results";     
    $scope.search = function() {

        $http.post($scope.url, { "data" : $scope.keywords}).
        success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            $scope.result = data; 
            alert('yes');
        })
        .
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;   
            alert('no');
            $scope.result = "failed";
        });
    };
}

Index.htmlで

<body ng-controller="MainCntl" >
---code
<div ng-controller="SearchCtrl">
     <form class="well form-search">
     <div class="ui-widget">
          <label for="tags"></label>
          <a ng-click="search()"><input type="image" src="../../images/search1.png" class="searchbox_submit" /></a>
          <input ng-model="keywords" placeholder="Shadow Search" id="tags" class="input-medium search-query rounded" /> 
     </div>
     </form>
</div>
---code
<p ng-model="result">
     {{result}}
</p>
</body>

私がデータを送信して応答を受信して​​いるajaxですべてがうまく機能します。私の質問は次のとおりです：

SearchCtrl関数には、後でIndex.htmlで参照される$ scope.resultという変数があります。その変数を含むhtmlコードをSearchCtrlコントローラーに挿入すると正常に機能しますが、MainCtrlコントローラーにある場合は機能しません。この変数をコントローラー間で共有するにはどうすればよいですか。

先に感謝します

ajaxangularjsglobal-variables
30
Gidon

サービスを使用して両方のコントローラーに注入し、スコープ変数をサービス変数に参照します。

例：

angular.module("yourAppName", []).factory("myService", function(){

  return {sharedObject: {data: null } }

});

function MainCtrl($scope, myService) {
  $scope.myVar = myService.sharedObject;
}

function SearchCtrl($scope, $http, myService) {
  $scope.myVar = myService.sharedObject;
}

テンプレートで以下を行います：

{{myVar.data}}

See an example 使用Angular v1.1.5

内部オブジェクトに配置する理由は、参照を保持するためです。「sharedObject」なしで保持し、そのオブジェクトを変更すると、バインディングは古い参照を指し、テンプレートには何も表示されません。

70
Shai Reznik - HiRez.io