AngularJS - ng-click not working in Modal

Question

I am having a Modal which opens up on a button click. In this Modal, a button uses ng-click to call a function from js file.The function doesn't get called, with no errors.

Outside the Modal the ng-click is working properly.

<div class="container-fluid" ng-app="app" ng-controller="GridCtrl">
    ....
    <div id="partial"></div>
</div>

function openModal() {                 
            jq.get('/Data/openModal?Id=' + Id, function (data) {
                jq('#partial').html(data);
                jq('#Modal').modal('show');
            });    
        }

Partial Page :-

@model Models.Data
@{       
    Layout = null;
}
<div class="modal fade bs-example-modal-lg" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">                    
                <h4 class="modal-title" id="compModalLabel">Master</h4>
            </div>
            <div class="modal-body">    
                <div class="container">    
                        <div class="col-sm-12">
                            <button type="button" ng-click="getData('live')">Live Data</button>
                        </div>
.....
</div>

var app = angular.module('app', ['ui.grid']);

app.controller('GridCtrl', ['$scope', function ($scope) {

$scope.getData= function (status){
    .....
}

}
]);

What is the solution?

Community · Accepted Answer · 2017-05-23 11:43:39Z

2

See here: Add DOM Elements (that are Angular directives) via jQuery .append()?

You need to have the newly added DOM elements compiled by Angular, with $compile(...)

(Although a more pure AngularJS codewould be better overall, you are mixing JQuery and NG. http://angular-ui.github.io/bootstrap/#modal)

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 30, 2014 at 10:45

Mesh

6,5105 gold badges37 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

AngularJS - ng-click not working in Modal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related