2015-02-10 2 views
3

Я <start-login></start-login> и директивыВыполнение директивы после проверки

app.directive('startLogin', function(){ 
    return { 
    restrict: 'E', 
    templateUrl: 'startlogin.html', 
    controller: 'LoginController' 
    } 
}); 

мне нужно выполнить директиву ТОЛЬКО после проверки, как это:

var checkLogin = false //variable 
if(checkLogin){ 
    //do something and DON'T EXECUTE DIRECTIVE 
}else{ 
    //EXECUTE DIRECTIVE 

Как я могу это сделать? Я также JQuery в моем проекте ..

+0

Вы должны спросить себя, действительно ли вам нужно использовать директиву в этом случае. Например, проверьте эту статью http://www.frederiknakstad.com/2014/02/09/ui-router-in-angular-client-side-auth/, как реализовать функции входа в систему с помощью ui-router. – Piotr

ответ

4

я бы, вероятно, пойти с ng-if:

<start-login ng-if="checkLogin"> ... </start-login> 

директива ngIf удаляет или воссоздает часть дерева DOM на основе {выражение}. Если выражение, присвоенное ngIf, оценивается как ложное значение, тогда элемент удаляется из DOM, иначе клон элемента снова вводится в DOM.

https://docs.angularjs.org/api/ng/directive/ngIf

6

Вы можете использовать ng-if directive, например, так:

<start-login ng-if="expression"> 

нг если не будет выводить содержимое тега, если выражение ложно.

Затем в вашем контроллере вы просто устанавливаете выражение в true, когда хотите, чтобы тег был видимым. В вашем примере вы можете использовать переменную checkLogin вместо выражения, конечно.


Там также есть большая разница между использованием ng-if и ng-show. Пользователь может не испытывать этого, так как фактическая разница в том, что ng-show скрывает. Содержимое и ng-if вообще не отображают его. Если мы инспектировать DOM между ними вы увидите, что они похожи на приведенный ниже код в различных состояниях:

Когда выражение истинно:

<start-login ng-show="expression"></start-login> 
<start-login ng-if="expression"></start-login> 

Когда выражение является ложным:

<start-login ng-show="expression" class="ng-hide"></start-login> 
<!-- ngIf: start-login --> 

Это большая разница. ng-if полностью удаляет элемент и добавляет комментарий к DOM. Если вы используете ng-show (или ng-hide), угловой добавляет класс к элементу. Класс объявлен как

.ng-hide { display: none; } 

, который только инструктирует веб-браузер не отображать элемент в макете. Элемент все еще «вынесен», или , выполненный, может быть лучшим словом, что является основным отличием здесь. Это может иметь реальное влияние при загрузке страницы, особенно если содержимое в элементе ng-if загружает данные с сервера, например. Это также означает, что если ваша директива изменяет DOM и добавляет конфиденциальную информацию, тогда вы должны использовать ng-if!

+0

Я думаю, что «ng-if» идеально, потому что я не хочу запускать директиву, если мне это не нужно. Большое спасибо. –

0

Конечно, вы можете использовать ngIf или ngShow/ngHide директивы, но есть еще один способ сделать that.You можно использовать angular.value (...).Когда вы определяете глобальное значение этого модуля, вводите его в директиву, затем перед созданием директивы вы можете проверить свое значение, а затем делать все, что хотите.

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