Угловая UI Bootstrap Модальные использовать в директиве

Question

Я хотел бы создать confirmation-dialog-header директиву, которая откроет Bootstrap UI Modal, который будет использоваться как это:

<button class="btn" confirmation-dialog-header="Non Working Dialog"> 
    Non Working Dialog 
</button> 

Вот что я пытаюсь сделать (CoffeeScript): Live Demo

app.directive 'confirmationDialogHeader', -> 
    restrict: 'A' 
    link: (scope, element, attrs) -> 
    $confirmationDialog = $ """ 
     <div modal="confirmationDialog"> 
     <div class="modal-header"> 
      <h4>#{attrs.confirmationDialogHeader}</h4> 
     </div> 
     <div class="modal-body"> 
      I want to be hidden by default 
     </div> 
     <div class="modal-footer"> 
      <button class="btn" ng-click="confirmationDialog = false"> 
      OK 
      </button> 
     </div> 
     </div> 
    """ 

    $(document.body).append($confirmationDialog) 

    $(element).click -> 
     scope.confirmationDialog = yes 

к сожалению, модальный не скрыты по умолчанию, и нажмите на кнопку, кажется, не имеют никакого эффекта.

Любая помощь будет оценена по достоинству.

Answer 1

1. При динамической вставке элементов DOM, содержащих директивы AngularJS, вам необходимо отправить $compile в AngularJS.
2. В случае обратного вызова scope.$apply необходимо вызвать триггеров для вычислений AngularJS.

Таким образом

app.directive 'confirmationDialogHeader', ($compile) -> # 1 

    $(document.body).append($confirmationDialog) 
    $compile($confirmationDialog)(scope) # 1 

    $(element).click -> 
    scope.confirmationDialog = yes 
    scope.$apply() # 2 

Working One

Answer 2

Вы должны использовать услугу dialog. Чтобы скрыть модальность в вашей директиве, оберните весь диалог в <div> с классами hide,modal,fade.