Close modal from controller not working

Question

I have a directive like below

'use strict';
 angular.module('abc.directives', [])
.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
                '<h4 class="modal-title">{{ modalTitle }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      restrict: 'E',
      transclude: true,
      replace:true,
      scope:true,
      link: function postLink(scope, element, attrs) {
        scope.modalTitle = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });

        $(element).on('shown.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = true;
          });
        });

        $(element).on('hidden.bs.modal', function(){
          scope.$apply(function(){
            scope.$parent[attrs.visible] = false;
          });
        });
      }
    };  
  });

I have a form like

    <modal title="Error" id='successmessage' visible="successmessage">
    <form role="form">
        Action was uccesful
        <span class="clearfix"></span>
        <button type="submit" class="btn btn-primary" ng-click="closemodal('successmessage');>Ok</button>
    </form>
</modal>    
<modal title="Error" id='errormessage' visible="errormessage">
<form role="form">
    Action was not Succesful
    <span class="clearfix"></span>
    <button type="submit" class="btn btn-primary" ng-click="closemodal('errormessage');>Ok</button>
</form>

I am trying to close the modal when i click on closemodal like

$scope.closemodal = function(scopename)
{
 $scope[scopename] = false;
}

i am trying to close the model by setting the property to false. but it does not work. How do i fix it?

I suggest you try out [UI Bootstrap's modal](http://angular-ui.github.io/bootstrap/#/modal), this will probably make things much easier for you. — muenchdo, Sep 03 '15 at 07:47

score 1 · Accepted Answer · answered Sep 03 '15 at 08:35

Is this what you are looking for:

angular.module('my-app', [])
.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog">' + 
            '<div class="modal-content">' + 
              '<div class="modal-header">' + 
                '<button type="button" class="close" ng-click="closemodal()">&times;</button>' + 
                '<h4 class="modal-title">{{ modalTitle }}</h4>' + 
              '</div>' + 
              '<div class="modal-body" ng-transclude></div>' + 
            '</div>' + 
          '</div>' + 
        '</div>',
      restrict: 'E',
      transclude: true,
      replace:true,
      link: function postLink(scope, element, attrs) {
        scope.modalTitle = attrs.title;
        scope.showModal = true;

        scope.closemodal = function () {
          scope.showModal = false;
        };
      }
    };  
  });

Working example here: http://codepen.io/cgav/pen/bVNEYz?editors=101

If i remove the line scope:true, in directive it works, but modal always take last modal title. How can i fix that. — Hacker, Sep 03 '15 at 14:01
How do you create those modals? If you could create a small demo on http://codepen.io it would help a lot to dig deeper into your problem. — ccg, Sep 04 '15 at 06:34

score 0 · Answer 2 · edited Jul 21 '16 at 09:01

Use ng-show like this, instead of visible:

<modal title="Error" id='errormessage' ng-show="errormessage">
    <form role="form">
        Action was not Succesful
        <span class="clearfix"></span>
        <button type="submit" class="btn btn-primary"
             ng-click="closemodal(errormessage);>Ok</button>
    </form>
</modal>

Now check above code and pass a variable instead of a value: ng-click="closemodal('errormessage')

score 0 · Answer 3 · edited May 23 '17 at 12:32

0

When A scope inherits a primitive, changing it in the parent scope will not make changes in inherited scopes, which is in your case the directive scope.

you should pass the directive an object, not a primitive.

reed more here: Angular js scope on nested template

edited May 23 '17 at 12:32

Community

1
1

answered Sep 03 '15 at 07:50

MoLow

3,056
2
21
41

Close modal from controller not working

3 Answers3