Задать вопрос
@ksivasid

Angular, как правильно передать асинхронные данные из фабрика->контроллер->директива?

Помогите разобраться с правильной передачей данных через цепочку:
Фабрика -> родительский контроллер -> директива
Проблема возникает с получением асинхронных данных. Если данные заведомо есть то все вроде бы понятно. Но как сказал проблема возникает если я данные запрашиваю с сервера. Сейчас мне приходится использовать 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>
  • Вопрос задан
  • 725 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
AMar4enko
@AMar4enko
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы