Cannot get the modal pop up value in controller using Angular.js

Question

I could not get text field value present inside the modal pop up using Angular.js. I am providing my code below.

view.html:

<modal title="Driver Information" visible="showModal">
   <div class="col-md-12">
            <div class="form-group">
                <label>Comment</label>
                <textarea class="form-control" id="comment" rows="3" ng-model="comment"></textarea>
            </div>
        </div>
<button class="btn btn-success" id="singlebutton" ng-click="save();">Save</button>
<div style="clear:both;"></div>
</modal>

My controller page is given below.

viewcontroller.js:

var dashboard=angular.module('easyride');
dashboard.controller('viewcontroller',function($scope){
    $scope.save=function(){
       console.log('comment',$scope.comment);
    }
})
dashboard.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog modal-lg">' + 
            '<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">{{ title }}</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.title = 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;
          });
        });
      }
    };
  });

In the console message I am getting the blank value even I am entering some value in comment field and click on save button. Here I need to get the user typed the comment value after click on save button and once the value will be printed via console message the pop up should close.

Have you tried removing scope:false and check if it works that way? — Stanislav Kvitash
– Stanislav Kvitash, Commented Feb 14, 2018 at 8:45
Yes I see, and that is why $scope.comment exists in the directive scope, but it is not the same as $scope.comment of the controller's scope. Use dot in your model or bindings to pass the callback into your directive. — Stanislav Kvitash
– Stanislav Kvitash, Commented Feb 14, 2018 at 8:52

FarukT · Accepted Answer · 2018-02-14 09:24:29Z

1

i made some simple changes in your code, check it and it works

visible="showModal"
ng-click="save(comment);"


$scope.save=function(comment){
        console.log('comment',comment);
        $scope.comment = comment;
        $scope.showModal = false;
    }

here is jsfiddle https://jsfiddle.net/0m8mpx43/2/

answered Feb 14, 2018 at 9:24

FarukT

1,66814 silver badges26 bronze badges

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

Comments

Hussain Mohd · Accepted Answer · 2018-02-14 08:48:49Z

1

you can pass it from the ng-click itself

<modal title="Driver Information" visible="showModal">
   <div class="col-md-12">
            <div class="form-group">
                <label>Comment</label>
                <textarea class="form-control" id="comment" rows="3" ng-model="comment"></textarea>
            </div>
        </div>
<button class="btn btn-success" id="singlebutton" ng-click="save(comment);">Save</button>
<div style="clear:both;"></div>
</modal>

then in controller

var dashboard=angular.module('easyride');
dashboard.controller('viewcontroller',function($scope){
    $scope.save=function(comment){
       console.log('comment',comment);
    }
})

answered Feb 14, 2018 at 8:48

Hussain Mohd

1367 bronze badges

7 Comments

satya Over a year ago

Let me to try and let you know ? How to close is popup inside that click event.

Hussain Mohd Over a year ago

try $(element).modal('toggle');

satya Over a year ago

what is element inside the controller.

Hussain Mohd Over a year ago

it is the element on which the directive is used on

Hussain Mohd Over a year ago

so in this case its the modal tag

|

Stanislav Kvitash · Accepted Answer · 2018-02-14 09:09:48Z

As I have mentioned in my comment - you are creating a new scope by inheriting parent scope, so $scope.comment in your controller will not be the same as $scope.comment in your directive. You have to use a "dot in your model" to make it work. If you want to close a modal after - you can implement this method inside the directive and then call it by passing as an argument. Here is a working example, that illustrates the mentioned changes to your code:

angular.module('easyride', [])
.controller('viewcontroller',function($scope){
    $scope.modelForModal = {
      showModal: true,
      comment: '',
      save: function (closeModal){
        console.log('comment',$scope.modelForModal.comment);
        if (angular.isFunction(closeModal)) { closeModal(); }
      }
    };
})
.directive('modal', function () {
    return {
      template: '<div class="modal fade">' + 
          '<div class="modal-dialog modal-lg">' + 
            '<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">{{ title }}</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.title = attrs.title;

        scope.$watch(attrs.visible, function(value){
          if(value == true)
            $(element).modal('show');
          else
            $(element).modal('hide');
        });
        
        scope.$parent.closeModal = scope.closeModal = function() {
          $(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;
          });
        });
      }
    };
  });

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.min.css">

<body ng-app="easyride">

<div ng-controller="viewcontroller">

<modal title="Driver Information" visible="modelForModal.showModal">
   <div class="col-md-12">
            <div class="form-group">
                <label>Comment</label>
                <textarea class="form-control" id="comment" rows="3" ng-model="modelForModal.comment"></textarea>
            </div>
        </div>
<button class="btn btn-success" id="singlebutton" ng-click="modelForModal.save(closeModal);">Save</button>
<div style="clear:both;"></div>
</modal>
   
</div>

</body>


<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.slim.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

Collectives™ on Stack Overflow

Cannot get the modal pop up value in controller using Angular.js

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related