CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-strap
kenshin9
kenshin9

Reputation: 2375

AngularStrap Modal Usage

I am currently using AngularStrap v2.3.1 and AngularJS v1.4.5.

I've been having some trouble getting AngularStrap's modals to work. It's most likely a misunderstanding of how it should work, as the documentation isn't too helpful. I am using the controllerAs syntax everywhere in my app.

From what I understood, I could create an object in the controller as such:

vm.editModal = {
    contentTemplate: '/templates/edit.html',
    backdrop: 'static',
    show: false
};

And then in my view, I would use the bs-modal with the modal property:

<a href="" bs-modal="ctrl.editModal">

However, all I get is a blank modal. It actually doesn't seem to be taking any of the properties from editModal. So it led me to believe that doing it that way only uses the title and content attributes. So it's for a basic modal?

I also tried using the $modal service, which I did inject into the controller. And then tried:

vm.editModal = $modal({
    show: false,
    contentTemplate: '/templates/edit.html',
    backdrop: 'static',
});

And I used the same HTML:

<a href="" bs-modal="ctrl.editModal">

However, in this case, I got a bunch of errors in the console and it didn't work either. Some errors;

[ng:cpws] Can't copy! Making copies of Window or Scope instances is not supported.
[$rootScope:infdig] 10 $digest() iterations reached.

As soon as I can get this working, I'd then like to try resolving data before the modal loads. But I haven't even gotten that far yet.

If someone could point me in the right direction, it'd be much appreciated.

Thanks!

Upvotes: 0

Views: 569

Answers (1)

Jesus Chavez
Jesus Chavez

Reputation: 46

mgcrea has a great example using a service to exchange information with the modal 

.service('$confirm', function($modal, $rootScope, $q) {
  var scope = $rootScope.$new();
  var deferred;
  scope.title = 'confirm';
  scope.content = 'Confirm deletion?';
  scope.answer = function(res) {
    deferred.resolve(res);
    confirm.hide();
  }

var confirm = $modal({template: 'confirm.tpl.html', scope: scope, show: false});
var parentShow = confirm.show;
confirm.show = function() {
  deferred = $q.defer();
  parentShow();
  return deferred.promise;
}

return confirm;
})

.controller('ModalDemoCtrl', function($scope, $confirm) {
$scope.delete = function() {
    $confirm.show().then(function(res) {
      console.warn('answered', res)
    })
};

Here -> http://plnkr.co/edit/KnRMGw5Avz2MW3TnzuVT

Hope this helps

Upvotes: 1

Related Questions