CODEWITHSUNDEEP
angularjsangularjs-directiveangular-ui-bootstrap
Misha Moroshko
Misha Moroshko

Reputation: 171321

Angular UI Bootstrap Modal use in directive

I would like to create a confirmation-dialog-header directive that will open a Bootstrap UI Modal that will be used like this:

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

Here is what I'm trying to do (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

Unfortunately, the modal is not hidden by default, and clicking the button doesn't seem to have any effect.

Any help would be appreciated.

Upvotes: 0

Views: 5970

Answers (2)

Jason
Jason

Reputation: 15931

You should use the dialog service. To hide the modal in your directive, wrap the entire dialog in a <div> with the classes hide,modal,fade.

Upvotes: 0

okm
okm

Reputation: 23871

  1. When dynamically inserting DOM elements containing AngularJS directives, you need to $compile them to kick in AngularJS.
  2. In event callback, scope.$apply need to be invoked to trigger AngularJS evaluation loops.

Thus 

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

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

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

Working One

Upvotes: 2

Related Questions