AngularJs UI Modal without $scope and extra ModalController (resolve)

Question

I want to implement UI Modal in AngularJS without using $Scope and without implementing the ModalController(resolve).
I am not using $scope in my Controller. I am using vm = this. So I dont know what value to assign to scope while openinig the Modal.
I also dont want to use resolve, as it involves creating one more Controller.

Please find my code below: Any help will be greatly appreciated.

HTML

<script type="text/ng-template" id="modaltemplate.html">
    <div class="modal-header">
        <h3>Modal Header</h3>
    </div>

    <div class="modal-body">
        <p>Modal Body</p>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="vm.close()" data-dismiss="modal">Close
        </button>
    </div>
</script>

CONTROLLER Look at scope in $uibModal.open() function.

angular
    .module("app", ["ui.bootstrap"])
    .controller("MyController", MyController)

MyController.$inject = ["$uibModal"];

function MyController($uibModal) {

    var vm = this;
    vm.open = open;
    vm.close = close;

    function open() {
        vm.modalInstance = $uibModal.open({
            templateUrl: 'modaltemplate.html',
            scope: //what should I assign here, I dont want to use $scope. Or in other words, I want to assign 'vm' here.
        });
    }

    function close() {
        //This function is not getting called as it does not understand the vm.
    }
}

I have tried the following things:

In the HTML, set ng-controller="MyController as vm".
Also tried setting various Values for scope, controller, and controllerAs in the $uibModal.open() function.

But nothing seems to working. Can anybody please help me out.

You've eliminated all the options used to avoid the use of $scope. All alternatives require you to create your own Modal Controller. — Randy Casburn
– Randy Casburn, Commented Apr 6, 2018 at 23:05
You mean to say that with this Coding Structure, it is mandatory to create the Modal Controller? And there is no way around it. Right? — Ankit Prajapati
– Ankit Prajapati, Commented Apr 7, 2018 at 0:06

Hasan Nafisi · Accepted Answer · 2018-04-07 08:59:41Z

1

if you have problem with Close function, you can set $dismiss() for close modal instance, also you can pass parameter in $dismiss function for further use, try this:

<script type="text/ng-template" id="modaltemplate.html">
    <div class="modal-header">
        <h3>Modal Header</h3>
    </div>

    <div class="modal-body">
        <p>Modal Body</p>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$dismiss('cancel')" data-dismiss="modal">Close
        </button>
    </div>
</script>

answered Apr 7, 2018 at 8:59

Hasan Nafisi

1386 bronze badges

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

1 Comment

Ankit Prajapati Over a year ago

Thanks @Hasan. Thats exactly what I was looking for. :)

Frane Poljak · Accepted Answer · 2018-04-07 15:24:53Z

0

You can create a new scope in main controller

var modalScope = $scope.$new();

assign what you need on new scope (or whole vm):

modalScope.vm = vm;

and then assign it as modal scope:

vm.modalInstance = $uibModal.open({
    templateUrl: 'modaltemplate.html',
    scope: modalScope
});

Just make sure you clear it when closing/destroying modal

modalScope.vm = null;

answered Apr 7, 2018 at 15:24

Frane Poljak

2,36323 silver badges25 bronze badges

Collectives™ on Stack Overflow

AngularJs UI Modal without $scope and extra ModalController (resolve)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related