最近AngularJSを使い始めましたが、アプリを作成する方法は次のようになります。
var app = angular.module('app', ['SomeController', 'MainController']);
app.controller('MainController', function ($scope) {
// do some stuff
}
var SomeController= angular.module('SomeController', []);
SomeController.controller('SomeController', function ($scope) {
$scope.variable = "test";
// do some otherstuff
}
Imが遭遇する問題は、スコープがモジュール間で共有されていないことです。 From MainControllerたとえば、変数「test」を取得できません。
$scope
を共有するにはどうすればよいですか、またはすべてを1つのコントローラーに入れても大丈夫ですか?次のようなサービスを使用できます: ライブデモはこちら(クリック)。
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>
ただし、子は親を更新しません。親のプロパティのみが子を更新します。
「ドットルール」を使用して、子の更新が親に影響を与えるようにします。これは、プロパティをオブジェクトにネストすることを意味します。親と子の両方が同じオブジェクトを持っているため、そのオブジェクトの変更は両方の場所に反映されます。これがオブジェクト参照の仕組みです。多くの人は、継承を使用しないことがベストプラクティスであると考えていますが、すべてを分離されたスコープを持つディレクティブに入れます。
$rootScope
を使用できます。各Angularアプリケーションにはルートスコープが1つだけあります。
app.controller('MainController', function ($scope, $rootScope) {
$rootScope.data = 'App scope data';
}