Почему мой дампинг не открывается - BootstrapUI - Angular

Question

Я пытаюсь получить datepicker от UI Bootstrap, чтобы открыть, когда я нажимаю значок. Вот мой html:

<p class="input-group"> 
    <input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="opened"/> 
<span class="input-group-btn"> 
    <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button> 
</span> 
</p> 

А вот мой js:

scope.open = function() { 
    scope.opened = true; 
}; 

scope.opened = false; 

Когда я нажимаю кнопку, я ударил open(), opened меняется и ничего не происходит. datepicker не отображается. Странная вещь, если я поставил ng-click на входе:

<input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="opened" ng-click="open()"/> 

Тогда datepicker работы и открывается, как это должно быть. Мне чего-то не хватает. Кто-нибудь понимает, в чем проблема?

Answer 1

1. Объявляет переменную opened в объекте.
2. Передайте объект события $ в открытое событие вашего контроллера и вызовите $event.stopPropagation(); перед установкой scope.status.opened = true.

Markup

<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> 

Контроллер

scope.open = function ($event) { 
    $event.stopPropagation(); 
    scope.status.opened = true; 
}; 

Объяснение, как я понимаю.

Директива datepicker создает html для отображения всплывающего окна datepicker. stopPropagation() предотвращает событие javascript click от каскадного \ выброса из элемента, на который вы нажали. Причина, по которой вы не видели всплывающее окно, состоит в том, что событие щелчка кипит в этот сгенерированный html, обрабатывается во второй раз и эффективно закрывает всплывающее окно (подобное поведение открывает всплывающее окно, а затем снова щелкнуло внутри всплывающего окна закрой его).

Answer 2

Это проблема с областью действия, поскольку вы устанавливаете переменную модели примитиву.

Попробуйте объявить переменную opened в объекте, например. status.opened:

<p class="input-group"> 
    <input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened"/> 
    <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button> 
    </span> 
</p> 

Контроллер

scope.status = { 
    opened: false 
} 

scope.open = function() { 
    scope.status.opened = true; 
};