javascript - AngularJS - ng-click 在模态中不起作用

Question

我有一个模态，它在单击按钮时打开。在此Modal中，按钮使用ng-click从js文件调用函数。该函数不'不会被调用，没有错误。

在模态框之外，ng-click 工作正常。

<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');
            });    
        }

部分页面:-

@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){
    .....
}

}
]);

解决办法是什么？

Answer 1

请参见此处:Add DOM Elements (that are Angular directives) via jQuery .append()?

您需要通过 Angular 使用 $compile(...) 来编译新添加的 DOM 元素

(虽然总体上更纯粹的 AngularJS 代码会更好，但您正在混合 JQuery 和 NG。 http://angular-ui.github.io/bootstrap/#modal )