CODEWITHSUNDEEP
jqueryangularjsangularjs-scopemodal-dialog
Rahul Sagore
Rahul Sagore

Reputation: 1668

Angularjs Scope in Jquery Modal popup

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.

Upvotes: 3

Views: 1412

Answers (2)

Rahul Sagore
Rahul Sagore

Reputation: 1668

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.

Upvotes: 0

user5887606
user5887606

Reputation:

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

Upvotes: 1

Related Questions