Как структурировать угловой коэффициент/обслуживание, которое управляет DOM

Question

Я строю рычание подобно UI в угловом. Я хотел бы представить его как завод (или услугу), чтобы сделать его доступным в моих контроллерах. Вызов growl.add приведет к изменению DOM, поэтому мне кажется, что у меня должна быть директива по этому поводу, а не прямое манипулирование DOM на заводе. Предположим, что наилучшим вариантом является комбинация с заводскими указателями (и, пожалуйста, исправьте меня, если это нехорошее предположение), вопрос:

Как лучше всего установить связь между фабрикой и директивой?

В частности, как лучше всего отправлять сообщения от завод по директиве? Другие вопросы хорошо охватывают отправку информации другим способом, с обратным вызовом ontime.

См. Ниже рабочий пример. Я подозреваю, что это лучший способ, хотя ..

Для справки, я играл с другими вариантами:

A) есть директива смотреть службы, например,

$scope.$watch(function(){ 
    growl.someFunctionThatGetsNewData()}, 
    function(newValue){ 
    //update scope 
    }) 

Но это означает, что someFunctionThatGetsNewData вызывается в каждом цикле переваривать, который, кажется расточительным, так как мы знаем, что данные только получает изменено на growl.add

B) отправить событие «», либо с помощью routecope, или через привязки событий в dom/window. Seen un-angleular

Поскольку ни один из этих вариантов не кажется хорошим, я использую один ниже, но он все еще чувствует себя взломанным. Функция register означает, что директива и завод тесно связаны. Но опять же от использование перспектива они плотно связанный - один не годится ни с другим.

Похоже, что идеальным решением было бы объявить фабрику (или службу), которая включает директиву в ее декларации (и, возможно, функциональную область), чтобы она предоставляла один открытый интерфейс. Кажется нехорошо иметь два отдельных публично объявленных компонента, которые полностью зависят друг от друга и имеют жесткую связь в интерфейсах.

Работа примера - но там должен быть лучшим способом ..

vpModule.directive('vpGrowl',['$timeout', 'growl', function ($timeout, growl) { 
return { 
    template: '<div>[[msg]]</div.', 
    link: function($scope, elm, attrs) { 

    growl.register(function(){ 
     $scope.msg = growl.msg; 
    }); 

    $scope.msg = growl.msg; 

    } 
}; 
}]); 


vpModule.factory('growl', ['$rootScope', '$sce', function($rootScope, $sce) { 

    var growl = {}; 
    growl.msg = ''; 
    var updateCallback = function(){}; 

    growl.add = function(msg){ 
    growl.msg = msg; 
    updateCallback(); 
    }; 

    growl.register = function(callback){ 
    updateCallback = callback; 
    }; 

    return growl; 
}]); 

Answer 1

Я бы ваш сервис рычания решить, что показать, а не директивы. Таким образом, служба обрабатывает любые таймеры, состояние и т. Д., Чтобы решить, когда скрывать/показывать сообщения. Затем служба предоставляет коллекцию сообщений, к которым просто привязывается директива.

Директива может вводить службу и просто размещать ее в области видимости, а затем привязывать ng-repeat к коллекции службы. Да, это касается часов, но вам действительно не нужно беспокоиться о производительности одного такого вида часов.

link: function(scope, elm, attrs) { scope.growl = growl; // where 'growl' is the injected service }

, а затем в шаблоне директивы:

<div ng-repeat="msg in growl.messages"> ... </div>

Answer 2

Я бы реализовать следующую логику:

1. Service growl определяет некоторые свойства growlProp на $rootScope & обновлять его на каждом звонок от growl.add
2. Директива набор наблюдающий на $rootScope.growlProp

директивы Так ничего не знает о службе & служба ничего не знает о directve.

И дополнительные накладные расходы, связанные с наблюдателем, минимальны.