0
  • 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:

  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.

4
  • 1
    You've eliminated all the options used to avoid the use of $scope. All alternatives require you to create your own Modal Controller. 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? Apr 7, 2018 at 0:06
  • Yes, that is what I mean. Apr 7, 2018 at 0:11
  • Ok. Thanks for the help. :) Apr 7, 2018 at 0:36

2 Answers 2

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>
1
  • Thanks @Hasan. Thats exactly what I was looking for. :) Apr 9, 2018 at 18:50
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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.