web-dev-qa-db-ja.com

AngularJSモジュール/スコープ共有

最近AngularJSを使い始めましたが、アプリを作成する方法は次のようになります。

MainController.js

var app = angular.module('app', ['SomeController', 'MainController']);

app.controller('MainController', function ($scope) {
    // do some stuff
}

SomeController.js

var SomeController= angular.module('SomeController', []);

SomeController.controller('SomeController', function ($scope) {
    $scope.variable = "test";
    // do some otherstuff
}

Imが遭遇する問題は、スコープがモジュール間で共有されていないことです。 From MainControllerたとえば、変数「test」を取得できません。

  • これのベストプラクティスは何ですか？すべてのコントローラーを1つのモジュールの1つのファイルに保存しますか？
  • 2つのコントローラーで1ページを作成し、それらの間で$scopeを共有するにはどうすればよいですか、またはすべてを1つのコントローラーに入れても大丈夫ですか？
angularjsangularjs-scopeangularjs-module
9
Chancho

次のようなサービスを使用できます： ライブデモはこちら（クリック）。

JavaScript：

var otherApp = angular.module('otherApp', []);
otherApp.factory('myService', function() {
  var myService = {
    someData: ''
  };
  return myService;
});
otherApp.controller('otherCtrl', function($scope, myService) {
  $scope.shared = myService;
});


var app = angular.module('myApp', ['otherApp']);

app.controller('myCtrl', function($scope, myService) {
  $scope.shared = myService; 
});

マークアップ：

  <div ng-controller="otherCtrl">
    <input ng-model="shared.someData" placeholder="Type here..">
  </div>
  <div ng-controller="myCtrl">
  {{shared.someData}}
  </div>

これはサービスとのデータ共有に関する素晴らしい記事です。

コントローラーをネストして、親コントローラーのスコーププロパティを子スコープに継承させることもできます。 http://jsbin.com/AgAYIVE/3/edit

  <div ng-controller="ctrl1">
    <span>ctrl1:</span>
    <input ng-model="foo" placeholder="Type here..">
    <div ng-controller="ctrl2">
      <span>ctrl2:</span>
      {{foo}}
    </div>
  </div>

ただし、子は親を更新しません。親のプロパティのみが子を更新します。

「ドットルール」を使用して、子の更新が親に影響を与えるようにします。これは、プロパティをオブジェクトにネストすることを意味します。親と子の両方が同じオブジェクトを持っているため、そのオブジェクトの変更は両方の場所に反映されます。これがオブジェクト参照の仕組みです。多くの人は、継承を使用しないことがベストプラクティスであると考えていますが、すべてを分離されたスコープを持つディレクティブに入れます。

19
m59

$rootScopeを使用できます。各Angularアプリケーションにはルートスコープが1つだけあります。

参照

app.controller('MainController', function ($scope, $rootScope) {
    $rootScope.data = 'App scope data';
}
0
Steely Wing