it-swarm.com.ru

Модули 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
}

Проблема, с которой я сталкиваюсь, заключается в том, что область не распределяется между модулями. From MainController Я не могу получить переменную "test", например.

  • Какова лучшая практика для этого? Я храню все мои контроллеры в 1 модуле в 1 файле?
  • Как я могу иметь 1 страницу с двумя контроллерами и делить $scope между ними, или это нормально, чтобы поместить все в один контроллер?
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 приложение имеет ровно одну корневую область.

Ссылка

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