CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Ankit Prajapati
Ankit Prajapati

Reputation: 1473

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

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:

  1. In the HTML, set ng-controller="MyController as vm".

  2. 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.

Upvotes: 0

Views: 789

Answers (2)

Frane Poljak
Frane Poljak

Reputation: 2365

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;

Upvotes: 0

Hasan Nafisi
Hasan Nafisi

Reputation: 138

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>

Upvotes: 1

Related Questions