AngularJS コントローラーはネストせずにどのように通信できるのでしょうか?

Angular コントローラー間の通信

AngularJS では、コントローラー間の通信を容易にすることが多くの場合必要になります。ただし、コントローラーがネストされていない場合、あるコントローラーから別のコントローラー内で変数にアクセスする場合、問題が発生します。

継承せずに変数を渡す

最初のコントローラー (Ctrl1) を変数として渡す$scope を使用して 2 番目のコントローラー (Ctrl2) に引数を指定すると、Ctrl1 は未定義のエラーのため実行できません。同様に、 Ctrl2.prototype = new Ctrl1(); を使用して Ctrl1 から Ctrl2 にプロパティを継承します。

解決策: サービスの利用

ネストせずにコントローラー間で変数を共有するには、サービスを作成し、それを関連するすべてのコントローラーに注入するのが効果的な解決策です。サービスは、機能を共有するために複数のコントローラーまたはディレクティブに挿入できる Angular コンポーネントです。

サービスの例:

angular.module('myApp').service('sharedProperties', function() {
  var property = 'First';

  return {
    getProperty: function() {
      return property;
    },
    setProperty: function(value) {
      property = value;
    }
  };
});

コントローラーでの使用:

function Ctrl1($scope, sharedProperties) {
  sharedProperties.setProperty('New First');
}

function Ctrl2($scope, sharedProperties) {
  $scope.prop2 = 'Second';
  $scope.both = sharedProperties.getProperty() + $scope.prop2;
}

sharedProperties を注入することにより

共有値へのバインド

共有値へのアクセスに加えて、共有データをバインドすることもできます。コントローラーのスコープ内のそれらに。バインドされた参照を保持するには、プリミティブ型ではなくオブジェクトのプロパティにバインドすることをお勧めします。

var property = { Property1: 'First' };

// Binded to a static copy in Ctrl1
$scope.prop11 = property.Property1;

// Binded to the shared value in Ctrl2
$scope.prop12 = sharedProperties.getProperty().Property1;

以上がAngularJS コントローラーはネストせずにどのように通信できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。