AngularJS - ng-click在Modal中不起作用

时间:2014-10-30 10:15:25

标签: javascript jquery asp.net-mvc angularjs twitter-bootstrap

我有Modalbutton点击后会打开。在这个Modal中,一个按钮使用ng-clickfunction文件调用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){
    .....
}

}
]);

解决方案是什么?

1 个答案:

答案 0 :(得分:1)

见这里:Add DOM Elements (that are Angular directives) via jQuery .append()?

您需要使用$ compile(...)

编译由Angular编译的新添加的DOM元素

(虽然更纯粹的AngularJS代码总体来说会更好,但是你混合了JQuery和NG。 http://angular-ui.github.io/bootstrap/#modal