Помогите разобраться с правильной передачей данных через цепочку:
Фабрика -> родительский контроллер -> директива
Проблема возникает с получением асинхронных данных. Если данные заведомо есть то все вроде бы понятно. Но как сказал проблема возникает если я данные запрашиваю с сервера. Сейчас мне приходится использовать watch в контроллере и дерективе. Как пишут гуру $scope в контроллерах использовать нельзя, но как мне без $scope.watch следить за обновлением данных в фабрике, и такая же ситуация с директивой, мне тоже приходиться вешать $scope.watch на то значение которое приходит от родительского контроллера. Если их не вешать, соотвественно я получу undefined в директиве на тот объект который пытаюсь получить. Объясните как правильно выстраивать такой порядок.
p/s Пример написал быстро, и работоспособность его не проверял может где и ошибся в коде, но думаю суть проблемы я смогу донести.
Директива (в ней пытаюсь получить данные которые получит фабрика)
(function() {
'use strict';
angular
.module('app')
.directive('myDirective', myDirective);
function myDirective() {
var directive = {
restrict: 'AE',
replace: true,
scope: true,
controller: directiveCtrl,
controllerAs: 'ctrl',
bindToController: {
model: '='
},
template: '<div><h2 data-ng-bind="ctrl.otheVar"></h2><p data-ng-bind="ctrl.otheModel"></p></div>',
link: link
};
return directive;
function link(scope, element, attrs, ctrl) {
}
}
directiveCtrl.$inject = ['$scope'];
function directiveCtrl($scope) {
var vm = this;
vm.otheModel = 1;
vm.otheVar = 'fooBarFooBarFooBarFooBarFooBarFooBarFooBarFooBar';
active();
function active (){
$scope.$watch(function (){return( vm.model );}, function (newValue, oldValue) {
if (newValue !== oldValue) {
vm.otheModel = newValue * 10;
vm.otheVar = vm.otheVar + newValue;
}
});
}
}
})();
Родительский контроллер директивы. В нем могут быть другие директивы и разная логика приложения
(function() {
'use strict';
angular
.module('app')
.controller('parentCtrl', parentCtrl);
parentCtrl.$inject = ['$scope','parentFactory'];
function parentCtrl($scope,parentFabric) {
var vm = this;
vm.model = {
ajax: {},
otheVar: true
};
$scope.$watch(function () {
return parentFactory.getModel();
}, function (newVal, oldVal) {
if (newVal !== oldVal) {
vm.model.ajax = newVal;
}
}, true);
}
})();
Фабрика для работы с данными(в ней я получаю или манипулирую данными, через нее передаю данные в другие контроллеры)
(function() {
'use strict';
angular
.module('app')
.factory('parentFactory', parentFactory);
parentFactory.$inject = ['$http'];
function parentFactory($http) {
var model = {};
var service = {
getModel : getModel,
manipulateModel : manipulateModel,
setModel : setModel
};
return service;
active();
function active(){
service.setModel().then(
function(data){
model = data.data;
},function(){
console.log('error');
}
);
}
function getModel(){
return model;
}
function manipulateModel(){
model.foo = 'bar';
//.
//.
//.
//.
//.
}
function setModel(){
return $http({
method: 'POST',
url: 'http://FooBar.ru'
}).success(function (data) {
}).error(function () {
});
}
}
})();
Так вызываю директиву в родительском контроллере:
<div>
.
.
.
<my-directive model="vm.model.ajax"></my-directive>
.
.
.
</div>
