10

私は最近 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
}

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

  • これのベストプラクティスは何ですか? すべてのコントローラを 1 つのモジュールの 1 つのファイルに保存しますか?
  • 1 つのページを 2 つのコントローラーで共有するにはどうすればよい$scopeですか? または、すべてを 1 つのコントローラーに配置しても問題ありませんか?
4

2 に答える 2

20

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

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>

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

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

于 2013-12-23T21:19:34.343 に答える
0

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

参照

app.controller('MainController', function ($scope, $rootScope) {
    $rootScope.data = 'App scope data';
}
于 2014-08-13T04:23:11.510 に答える