Toggle bootstrap modal using angular variable

Question

I wrote a bootstrap3 modal for my project before learning angular which was triggered using a button. Now I want to toggle it using angular variable. Taking reference from this article, i have simplified my code as follows:

My modal html:

<div id="registered" tabindex="-1" modal-toggle role="dialog" aria-labelledby="registeredModal" aria-hidden="true" class="modal fade">
  <div class="modal-dialog modal-lg">
    ...
    ...
  </div>
</div>

modalToggle directive:

app.directive("modalToggle",function(){
  return function(scope, element, attrs){
    scope.$watch(scope.loaded.showModal, function(value) {
                if (value) element.modal('show');
                else element.modal('hide');
    });
  }
})

scope.loaded.showModal is set on following controller, which is called after i hit tab on my form input:

app.controller('validatectrl',[ '$http', '$scope', '$upload', $location, function($http, $scope, $location){
      unique: function(param){
        $scope.loading={};
        $scope.loaded={};
        $scope.loading[param.field]=true;

        var currentPath=$location.path();
        var webCall = $http({
                   method: 'POST',
                   url: currentPath+'/validation',
                   async : true,
                   headers: {
                     'Content-Type': 'application/json'
                   },
                   timeout:10000,
                   data: param});
        webCall.then(handleSuccess,handleError);
        function handleSuccess(response) {
          ...
          if(response.data.status===1) {
            ...
          }
          else if(response.data.status===0){
            $scope.loaded["showModal"]=true;
            alert("duplicate item");
          }
        }
        function handleError(response){
          $scope.loaded[param.field]={};
          $scope.loading[param.field]=false;
          $scope.loaded[param.field]["error"]=true;
          $scope.loaded[param.field]["Message"]="Cannot fetch data from server";
        };
      }

Everything else works except for the modal does not pop up.

You should probably use github.com/angular-ui/bootstrap or similar, instead of vanilla Bootstrap's jQuery-based JavaScript. — cvrebert
– cvrebert, Commented Dec 15, 2014 at 16:48
yeah...bt i had already done the prototype in bootstrap's jquery one... n there was time constraint then... m looking into it nw... thanks... — Pravin
– Pravin, Commented Dec 16, 2014 at 4:02

murnax · Accepted Answer · 2014-12-15 11:26:38Z

2

Can you try to change from

scope.$watch(scope.loaded.showModal, function(value) {
            if (value) element.modal('show');
            else element.modal('hide');
});

to

scope.$watch(function(){ return scope.loaded.showModal; }, function(value) {
            if (value) element.modal('show');
            else element.modal('hide');
});

Hope this help.

answered Dec 15, 2014 at 11:26

murnax

1,2221 gold badge10 silver badges13 bronze badges

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

2 Comments

Pravin Over a year ago

that worked perfectly. thanks a lot. can you please explain what was the issue?

murnax Over a year ago

I'm really sorry but I'm not good enough to explain this in term of technique. But I've faced the problem like this before then I try to return the value from the function and it's work

Collectives™ on Stack Overflow

Toggle bootstrap modal using angular variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related