Clever Geek Handbook

AngularJS - private modal function not working

I made a simple popup with ui.bootstrap

, but I can't seem to get the OK and CLOSE button to work. What am I missing in this sample code?

Here is some sample code from plunkr

thank

** added exact code image

enter image description here

+3


source to share


3 answers


close

and dismiss

are methods of the object $modalInstance

returned $modal.open

:

$scope.open = function() {
    $scope.$modalInstance = $modal.open({
        scope: $scope,
        templateUrl: "modalContent.html",
        size: '',
    })
};

$scope.ok = function() {
    $scope.$modalInstance.close();
};

$scope.cancel = function() {
    $scope.$modalInstance.dismiss('cancel');
};


Another problem with your code is that you need to specify scope: $scope

in modal config. This is necessary if you want the area inside the modal template to be a child area of ​​where you define the methods ok/cancel

.

Demo fixed: http://plnkr.co/edit/Y5s4yPm1TZB8S9nfO5CA?p=preview

+13


source


I have updated your code with a working version

http://plnkr.co/edit/iM5o0le3OioqxHBNF3d1?p=preview

There are several bugs in the code.

$ modal is a factory, you cannot call $ modal.close ()

You will need to do something like:



 this.modal = $modal(....)

 this.modal.close();

However, even if you did it in your controller, your modal view doesn't have scope access.

The forked box solution I suggest is to use

  ng-click="$parent.$close()"
+1


source


There are several ways, as explained earlier, and it depends on what context you need to use it in.

For example, if the modal is just a notification, there is no need to use functions for the OK or CANCEL buttons, simply using $ reject () or $ close () on the ng-click of the buttons located in modalContent. html file will suffice.

Here is also the updated plunker

http://plnkr.co/edit/OfCGJX?p=preview

<div class="modal-footer">
    <button class="btn btn-primary" ng-click="$close()">OK</button>
    <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
+1


source






More articles:


All Articles