CODEWITHSUNDEEP
javascriptangularjs
satya
satya

Reputation: 3560

Could not get input data from modal pop up using Angular.js

I am using the modal pop up where my form is present and I am unable to get the form data via ng-model using Angular.js. I am providing my code below.

<modal title="Owner Information" visible="showModal">
  <form class="ng-pristine ng-valid" id="frmsignup" name="frmsignup"  autocomplete="off">
  <div class="input-group bmargindiv1 col-lg-4 col-md-4 col-sm-4 col-xs-12 plr-15">
        <span class="input-group-addon ndrftextwidth text-left">Status:</span>
            <select class="form-control" name="status"  id="status" ng-model="status" required="required">
            <option value="">Select Status</option>
            <option value="1">Active</option>
            <option value="0">Inactive</option>
            </select>
  </div>
<div class="input-group bmargindiv1 col-lg-4 col-md-4 col-sm-4 col-xs-12 plr-15">
        <span class="input-group-addon ndrftextwidth text-left">Comment:</span>
            <textarea rows="5" cols="50" class="form-control" id="comment" name="comment" ng-model="comment" required="required">
            </textarea>
    </div>
  <input type="button" class="btn btn-success" ng-click="updateOwnerData();" id="addProfileData" value="Save" />
</form>
</modal>

My modal pop up is given below.

var dept=angular.module('cab');
dept.controller('ownerviewController',function($scope,$http,$timeout,$state,Upload,$window,DataService){
   $scope.updateOwnerData=function(){
          console.log('data',$scope.status,$scope.comment);
   }
})
dept.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;
          });
        });
      }
    };
  });

The above is my script part. Here My issue is I could not get value through $scope from pop up window. I need to collect the value via Angular.js Scope.

Upvotes: 1

Views: 312

Answers (2)

hc_dev
hc_dev

Reputation: 9418

scopes

In the modal pop-up directive both transcluded: true and scope: true create their own isolated scope. The scope you want to get the updated inputs is yet another: your controller's scope.

See visual explanation in Access Parent Scope in Transcluded Directive.

communication

In order to communicate from inside the directive/transcluded-form with the parent's scope you can use the following:

  • add an own scope scope: { status: '=', comment: '=' } to your directive and use two-way-binding '=' to pass the parent's scope-variables like <modal title="Owner Information" visible="showModal" data-status="status", data-comment="comment">
  • create and inject a factory or service to handle communication (i.e. data-updates) between directive (form) and controller

See AngularJS : Directive transcluded scope lost

solution with (inherited) scope

see fiddle. It just uses the parent scope (from controller) via prototypical inheritance. So the model (status, comment) can be used as well as the function to update can be called within the transcluded form.

Upvotes: 1

Sergey Mell
Sergey Mell

Reputation: 8050

I failed to figure out what is the problem with scopes. It seems that values are propagated inside (so, you can set the initial value for ng-model) but they do not come outside, so I've used controllerAs syntax and view model principle:

dept.controller('ownerviewController',function($scope){

    var vm = this; // Creating view model

    $scope.openPopUP=function(){
        $scope.showModal = !$scope.showModal;
    }
    $scope.updateOwnerData=function(){
        console.log('data', vm.status, vm.comment); //Showing data from view model
    } 
})

Next step, you should define view model in your template by means of controllerAs syntax and change ng-model bindings:

<body ng-controller="ownerviewController as vm">
...
   <select class="form-control" name="status" id="status" ng-model="vm.status" required="required">
   ...

You can find the working example here

The full version with modal popup is also available

Upvotes: 1

Related Questions