2014-10-08 3 views
1

Я пытаюсь создать простую службу системного уведомления в Угловом, которая в основном переключает уведомление, чтобы оно стало видимым в верхней части моего окна в фиксированном положении, пока пользователь не взаимодействует с ним. Проблема, которую я имею пытается позиционировать элемент после Угловая обновляет DOM Основе моего $scopeКак манипулировать элементом DOM после цикла Angular digest?

app.directive('skSystemUpdate', function(SystemUpdate){ 
    return { 
     replace:true, 
     restrict: 'A', 
     template:'<div class="sk-system-update-wrap">\ 
        <div class="sk-system-update" ng-show="showSystemUpdate">\ 
         <sk-img class="iGreenSystemCheck"></sk-img>\ 
         <span class="sk-system-update-text">{{ message }}</span>\ 
         <a>Undo</a>\ 
        </div>\ 
       </div>', 
     link: function(scope, elem, attrs){ 

      scope.$watch('showSystemUpdate', function(val){ 
       if(val){ 
        angular.extend(scope, SystemUpdate.getScope()); 
       } 
      }); 

     } 

    } 
}); 

У меня есть сервис под названием SystemUpdate, который используется для настройки видимости переменных основаны от параметров (т.е. SystemUpdate.create('This is some text for the notification')), а затем переведите флаг $rootScope.showSystemUpdate в значение true.

Моей директива $watch ИНГИ для этого изменения, и когда флаг установлен в верно, я получаю переменную области видимости от SystemUpdate службы и Угловой берет на себя все остальное, применяя обновленный scope.message переменного в DOM.

Моя проблема заключается в том, что я не могу понять, как центрировать мое уведомление ПОСЛЕ управления DOM.

Update

Я до сих пор не может найти решение, кроме использования $timeout, которое не является отличным решением на всех, потому что вы можете ясно видеть Div «прыгать» между позициями, если изменяется сообщение ... Это это то, что люди делали раньше! Это то, что каждый может сделать с jQuery за считанные секунды, но Angular делает это настоящей болью.

+0

Если кто-то думает, что я просто неправильно проектирую это для Углового, то, пожалуйста, дайте мне знать. Я все еще новичок в Angular и не совсем уверен, как реализовать некоторые функции. –

+0

Мне удалось заставить его работать с использованием '$ timeout' и применения манипуляций DOM внутри функции' $ timeout'. Так ли это должно быть сделано? Это кажется взломанным, но я считаю, что люди используют этот метод для других вещей до –

+0

nevermind .. такого рода работы, но вы можете увидеть, как элемент прыгает с одного места на другое. Я думаю, что тайм-аут слишком медленный. –

ответ

0

Мне все еще хотелось бы знать, как кто-то будет манипулировать DOM после ng-show/ng-hide, но тем временем Я смог произвести эффект, который я ищу, просто обернув мой элемент в другой div, который равен position:fixed, а затем просто используя text-align:center, чтобы центрировать меньший div внутри этого. Это, по сути, то, как Angular UI Bootstrap сосредотачивает свои модальности, но я все равно хотел бы знать истинное решение исходной проблемы, если бы угловые гуру обязали.

Смежные вопросы