Angular UI Bootstrap Modal use in directive

Question

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.

animuson · Accepted Answer · 2014-01-29 23:34:52Z

2

When dynamically inserting DOM elements containing AngularJS directives, you need to $compile them to kick in AngularJS.
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

edited Jan 29, 2014 at 23:34

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

answered Jun 10, 2013 at 5:48

okm

23.9k5 gold badges86 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ryanyuyu · Accepted Answer · 2015-06-26 12:59:10Z

0

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.

edited Jun 26, 2015 at 12:59

ryanyuyu

6,50611 gold badges53 silver badges56 bronze badges

answered Jun 9, 2013 at 13:55

Jason

15.9k3 gold badges51 silver badges73 bronze badges

5 Comments

Jason Over a year ago

It looks like you are writing your own directive for bootstrap. I'm suggesting you use the one the angular team has already written.

Misha Moroshko Over a year ago

My directive should have some confirmation logic. What you suggest doesn't provide that. I need a custom directive that uses the modal directive they provide.

Jason Over a year ago

Look at the JavaScript on the project page, you can see up buttons and capture results from the dialog. A dialog can have its own controller which could do verification and then pass the results back to the parent controller

Misha Moroshko Over a year ago

Thanks! I'll have a look. But, still, I would be interested to know why the code above isn't working as expected.

Jason Over a year ago

See my update, I think you are missing a class on the modal header.

Collectives™ on Stack Overflow

Angular UI Bootstrap Modal use in directive

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related