CODEWITHSUNDEEP
javascriptangularjs
Blaze
Blaze

Reputation: 2339

AngularJs: I want to destroy the content in Modal Popup on Button Click

I want to destroy the content in a modal pop up on button click so that on opening the pop up again, no content is found. So I have this

//clear the content of the text field
   $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };

This is the button that calls the function

<button style="border: 3px solid red; border-radius:5px; color: #ff6000" class="button button-clear button-positive" ng-click="cancel()">Clear</button>

This is the content in the modal pop up

<label class="item item-input">
              <textarea ng-model="content" rows="5" placeholder="What's new..."></textarea>
          </label>
<img id="myImage" ng-show="imgURI !== undefined" ng-src="{{imgURI}}" class="imgBorder full-image">

When I click on the button, nothing happens. Please what is the cuase.

EDITED: This is the code block that opens the modal

// Open our new task modal
  $scope.newPost = function(index) {
      var modalInstance = $modal.open({...});
       if (index == 1) $scope.postModal.show()
      else $scope.selectModal.show();
     // $scope.postModal.show();

  };

Upvotes: 1

Views: 7972

Answers (1)

Brian
Brian

Reputation: 1097

If you destroy the modalInstance in the code that initially creates it via its $destroy() function, the next time the creation code is run it will start over again.

For AngularUI, this could look like:

var modalInstance = $modal.open({...});

modalInstance
    .result
    .then( function( modalResult ){
        // Do something with modal result if you want
    }).finally(function(){
        modalInstance.$destroy(); 
        // After calling this, the next time open is called, everything will be re-initialized.
    });

Built out an example in plunkr here: http://plnkr.co/KUDSFc

For Ionic, I would approach the issue a bit differently. It looks like a case of problematic scope inheritance. Ionic modal scopes inherit the scope of their initializing controller (when passed in during fromTemplateUrl()). When you bind ng-models directly to primitives on scope, they break interitance. Google the "ngModel dot rule" for more detail - or for a TON of detail, check out the angular wiki: https://github.com/angular/angular.js/wiki/Understanding-Scopes

What it boils down to, is always have a "dot" when you bind to ng-model. Otherwise child scopes will make a copy of inherited primitives instead of updating their parent scope's variable.

So, for your case add one more layer on the parent scope before binding to .content.

Example:

angular.controller( 'TestCtrl', ['$scope', function( $scope ){
    $scope.data = {
        content: '' // This is what we'll bind the modal's textarea to
    };

    $ionicModal.fromTemplateUrl( 'my-modal.html', {
        scope: $scope,
        animation: 'slide-in-up'
    } ).then( function( postModal ) {
        $scope.postModal = postModal;
    });

    $scope.closeModal = function() {
        var content = $scope.data.content; // Make a copy of whatever was entered on the modal and do what you want with it
        $scope.data.content = ''; // Clear out the ng-modal content
        $scope.postModal.hide(); // Hide the modal
    };
}]);

Working sample I wrote on the Ionic playground: http://play.ionic.io/app/a33e2f54ec0a

(Helpful info taken from the Ionic docs: http://ionicframework.com/docs/api/service/$ionicModal/ and http://learn.ionicframework.com/formulas/making-modals/ )

Upvotes: 2

Related Questions