0

I have looked at angular-ui bootstrap and ng-dialog and they appear overkill for what I need viz: 

<div ng-repeat="item in items">      
  <div class="dialog-content">
    <h5 ng-click="dialog_open()">{{item.title}}</h5>
    <p>{{item.content}}</p>
  </div>      
</div>

When the <h5> is clicked I want div.dialog-content to be displayed in a dialog styled using bootstrap's modal (without modal-header and modal-footer). The dialog closes whenever a user clicks outside of it.

How do I achieve this?

Any help will be appreciated. Thanks!

Andrew Eisenberg
  • 28,387
  • 9
  • 92
  • 148
nubianrover
  • 3
  • 3

1 Answers1

0

If you want to achieve this with ng-dialog, do the following:

Include ngDialog.css and ngDialog-theme-default.css in your html.

You have to specify closeByDocument:true and add className: 'ngdialog-theme-default'

Here is a template : 

ngDialog.open({ 
     template: '<div> hello dialog!</div>',
     plain:true,
     closeByDocument:true,
     className: 'ngdialog-theme-default'
   });

Working example here

eenagy
  • 912
  • 1
  • 8
  • 22
  • Thanks a lot for the answer. I am getting "TypeError: options.scope.$new is not a function" in the console. Also, how do I set the 'template' option from inside ng-repeat? – nubianrover Jun 15 '16 at 23:10
  • @nubianrover put your code into jsfiddle, or jsbin, or share a git repo, can't help otherwise – eenagy Jun 16 '16 at 03:33