Angular UI Modal, inline template and controller

Question

I want to create a really simple confirmation box using UI-modal, which I have successfully used to make complicated modals that load their template and controller from external files in the past.

It's so simple though that I don't want to rely on external template and controller files, just a simple box with a close button which is somehow wired up to a controller declared directly on the modal instance.

Here is what I have tried unsuccessfully...

var modalInstance = $modal.open({
    template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
    controller: function(){

        $scope.cancel = function(){
            alert("Cancelled");
        };

    }
});

Answer 1

Looks like you need to inject $scope into your controller function

controller: function($scope){

The scope of the modal template is not the same as the scope in the controller that you've defined the modal instance in.

The reason you're not getting undefined errors is $scope is a closure variable so adding .cancel() to it works just fine. But, since it isn't the same scope of the modal, so the ng-click doesn't see a .cancel() on its scope.

I replicated in this jsbin: http://jsbin.com/gejuxije/1/edit

Edit: Since you mentioned you didn't want external files for a template, here's a demo of how to define the template for the modal inside the template of the view it is used on.

http://jsbin.com/gejuxije/2/edit

You can put html inside of an inline script...

<script type="text/ng-template" id="myModalTemplateName.html"></script>

Answer 2

The value you pass to 'template' needs to be valid HTML, and ideally should contain the appropriate modal CSS classes.

You may also need to pass in the scope for the controller.

var modalInstance = $modal.open({
    scope:$scope,
    template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
    controller: function(){
        $scope.cancel = function(){
            alert("Cancelled");
        };
    }
});

In general I have not had to do this, but since you are defining the controller in the open method it may be necessary. According to the docs it should create a new scope as a child of rootScope, but I suspect your mileage is varying. I wish the instructions on the website were a little more informative on this topic.

You may also want to try $close and $dismiss. I've never tried them, but since you are not having luck with the scope variable these might be what you need.

Answer 3

I am just trying to do something similar and stumbled across this. I know it's old but it might help someone.

Simply put

modalInstance.close(); 

in the cancel function