1

I'm trying to create reusable confirm dialog using AngularUI Bootstrap modal, where "ok" / "cancel" buttons are in a custom window template. The issue is that while I can provide a scope for modal content, it's not available inside window template, so that I can't really call custom function when "ok" button is clicked.

Here's the code I've got currently:

<a href="" fl-confirm-modal fl-confirm-modal-action="delete(training)" fl-confirm-modal-template="delete">Delete</a>

The directive has an isolated scope, which has confirm method that calls action passed to the directive (fl-confirm-modal-action) and closes the modal. The issue is that calling confirm() works fine inside modal content template, but doesn't work in modal window.

EDIT:

Here's a snippet from the directive:

.directive "flConfirmModal",
($modal) ->
  restrict: "A"
  scope:
    action: "&flConfirmModalAction"
    template:  "@flConfirmModalTemplate"

  link: ($scope, $element, $attrs) ->
    $scope.confirm = ->
      $scope.modalInstance.close()
      $scope.action()

    $element.on "click", ->
      $scope.modalInstance = $modal.open
        scope: $scope
        windowTemplateUrl: "window_confirm.html"
        templateUrl: template

In window_confirm.html template there's a button with ng-click="confirm()" that is supposed to call confirm method defined the directive, but its scope is not available there.

Is there some workaround except moving "ok"/"cancel" from layout to each content template?

szimek
  • 6,404
  • 5
  • 32
  • 36
  • 1
    You're missing a lot of code here :-) – Sam P May 27 '14 at 11:20
  • I've solved it for now by using the default `window.html` template and creating a separate layout template with ok/cancel buttons. User provides name of the template with content and I'm fetching both layout and content templates using `$http.get`, insert content template into layout template and pass the result as `template` parameter to `$modal.open`. This works fine and the only issue (though quite annoying) is that because I'm calling `$http.get`, the whole thing returns a promise that resolves to `modalInstance` instead of `modalInstance` directly. – szimek May 28 '14 at 14:34

0 Answers0