Angularjs Scope in Jquery Modal popup

Question

js 1.3 with jquery. I have to display a form input in modal window. For which I have written a jquery function which will open the hidden dom content in Modal window.

ShowModal.open({
    content: $(".modal_content").html(), //Get html content form dom
})

Code for modal is working fine. The problem is the modal is not getting the controller's scope. I am using "Controller As" syntax for controller:

function controller(){
    bindVm = this;
    bindVm.data = ["Hello", "World"]
}

In Modal window

<div ng-controller="controller as bindVm">
    <div class="modal_content"> {{bindVm.data[0]}}</div>
</div>

The controller's code is working fine for normal page, but not working in modal window.

Note : I am also attaching html content using $compile

$modalContent.html($compile($modal_content)($scope));

Still not working. Anybody got something.

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

In modal you need to resolve your variables or scopes and pass to modal controller then you can start to use them check here Angular-UI Modal resolve

Pass parameter to modal

edited May 23 '17 at 12:24

Community

1
1

answered Feb 16 '16 at 14:49

I am not using Angular-UI. I created my own custom modal function with jquery. Read the question carefully. – Rahul Sagore Feb 16 '16 at 17:45

score 0 · Answer 2 · answered Feb 17 '16 at 09:37

The problem has been solved. used $templateCache to get the template and attaching data to $scope instead of bindVm alias.

html:

<script type="text/ng-template" id="template1.html">
    <div class="modal_content"> {{data[0]}}</div>
</script>

JS:

$modalContent.html($compile($templateCache.get('template1.html'))($scope));

Working now.

Angularjs Scope in Jquery Modal popup

2 Answers2