0

データを渡す必要がある並列スコープ レベルに 2 つのコントローラーがあります。

function TableRowCtrl($scope, $http, sharedProperties) {
  console.log(sharedProperties.getProperty());
  $scope.items = sharedProperties.getProperty();
}

と

function SideNavCtrl($scope, $http, sharedProperties) {
  $scope.customers = undefined;
  var temp = "cats";

  $http.get('data/customers.json').success(function(data) {
    $scope.customers = data;
    temp = "dogs";
    sharedProperties.setProperty(temp)
  });

  sharedProperties.setProperty(temp);
  console.log(sharedProperties.getProperty());
}

これを行うためにサービスを使用しようとしています（私が見た例を介して）：

angular.module('myApp', []).service('sharedProperties', function() {
var property = "Cats";
return {
    getProperty: function() {
        return property;
    },
    setProperty: function(value) {
        property = value;
    }
};
});

ただし、SideNavCtrl http 成功関数でデータを設定しようとしても、バブルアウトしません。サービスは、値として「cats」を返します。私が読んだことから、サービスはグローバルであると想定されており、それらのデータの設定は（その目的と同様に）永続的である必要があります。何が間違っているのでしょうか? 同じスコープにあるこれら 2 つのコントローラー間でデータを取得するにはどうすればよいですか?

4

2 に答える 2

4

問題はTableRowCtrl、関数の結果をスコープ変数に保存することです。サービス自体が変更されても、その時点では単純なプロパティであるため、スコープ内の値は変更されません。スコープでサービスを直接公開するか、代わりに $scope.items を関数でラップすることができます。

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.items = function() { return sharedProperties.getProperty(); };
}

// And in your view
{{ items() }}

または

function TableRowCtrl($scope, $http, sharedProperties) {
    $scope.shared = sharedProperties;
}

// And in your view
{{ shared.getProperties() }}

編集： ここで簡単なplunkr

編集＃2：

問題が非同期プロセスのために更新されないバインディングである場合は、次を使用できます$scope.$apply。

$http.get('data/customers.json').success(function(data) {
  $scope.customers = data;
  temp = "dogs";
  sharedProperties.setProperty(temp)

  if(!$scope.$$phase)
    $scope.$apply();
});

編集3：

私はあなたを再作成し、 plunkr$http.getを更新しましたが、動作します。質問で示している内容に基づいて、通常のプロパティの代わりに関数を使用して機能するはずです。

于 2013-08-14T14:56:00.900 に答える