ng-click 在包含的 jsp 页面上不起作用

Question

我正在尝试在主页的 div 中加载另一个 jsp 页面。它的工作正常。但是 angularjs 函数不起作用。

我的 html 是...

<a href="javascript:;" class="dropdown-toggle" data-hover="megamenu-dropdown" data-close-others="true" ng-click="loadMain()"> File Import<i class="fa fa-angle-down" aria-hidden="true"></i> </a> 

<div id="contentDiv">
</div>

我的角度 js 是： 控制器：

 $scope.loadMain = function () {
    alert(" reached to controller!!!");
    var resp = services.test();
    resp.then(function (response) {
        document.getElementById("contentDiv").innerHTML = $sce.trustAsHtml(response.data);
   });
};

服务是：

this.test = function () {
    alert("coming from service!!!");
    return $http.get("fileimport/fileupload")
            .then(function (response) {
                return response;
            });

};

我的 fileupload.jsp 页面是：

<div class="row">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet light portlet-fit portlet-form bordered">                                
    <div class="portlet-body">
        <!-- BEGIN FORM-->
        <div class="row">
            <div class="col-md-12">
                <div class="note note-info">
                    <h4><i class="fa fa-info-circle" aria-hidden="true"></i> File Upload</h4>                                                                    
                </div>                                                                
            </div>
            <div class="col-md-6 leftbor">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group form-md-line-input form-md-floating-label has-info">
                            <div class="input-icon">
                                <input type="text" tabindex="24" class="form-control" ng-model="uploadform.uername">
                                <label for="form_control_1">User Name :</label>
                                <span class="help-block">Enter User Name...</span>
                                <i class="fa fa-user" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="single-append-text" class="control-label">Template :</label>
                                </div>
                                <div class="col-md-8">
                                    <div class="input-group select2-bootstrap-append">
                                        <select id="single-append-text"  tabindex="8" ng-model="uploadform.templateName"  class="form-control select2-allow-clear">
                                            <option></option>
                                            <optgroup label="Select Template">
                                                <option value="new">New</option>   
                                                <option value="AK">Alaska</option>                                                                                    
                                                <option value="CA">California</option>
                                            </optgroup>                                                                                
                                        </select>
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button">
                                                <i class="fa fa-refresh" aria-hidden="true"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class="col-md-4">
                            <label class="control-label">Excel File Upload :</label>

                        </div>
                        <div class="col-md-8">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div style="float: left;">                                                            
                                    <span class="btn green btn-outline btn-file" >
                                        <span class="fileinput-new"><i class="fa fa-picture-o" aria-hidden="true"></i> Select excel </span>
                                        <span class="fileinput-exists"><i class="fa fa-refresh" aria-hidden="true"></i> Change </span>
                                        <input type="file" tabindex="8" name="excelFile" id="excelFile" file-model="myFile"> 
                                    </span>
                                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput"> <i class="fa fa-close" aria-hidden="true"></i> Remove </a>
                                    <div class="clearfix"></div>

                                </div>


                                <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 160px;">
                                    <img src="<c:url value='/assets/layouts/layout/img/img3.png'/>" alt="logo" class="logo-default" /> 
                                </div>


                            </div>
                        </div>


                        <div class="col-md-8">
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <div>

                                </div>

                            </div>

                        </div>                                                 
                    </div> 
                    <div>
                        <input type="button" value="upload" class="btn default btn-lg" ng-click="uploadFile()"/>
                        <button ng-click="uploadFile()" class="btn default btn-lg">upload me</button>

                        <!--<button ng-click="fileUpload()">upload</button>-->
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>                                   
        <!-- END FORM-->
    </div>


</div>
<div style="color: green"> {{uploadform}}</div>
<!-- END VALIDATION STATES-->

这里 ng-click 在 fileupload.jsp 页面中也不起作用 {{uploadform}} 不工作

Answer 1

使用ng-include而不是包含模板的本地java脚本方式，因为Angular不会识别在它的上下文之外发生的事件，同样的原因你的范围变量没有被评估，即{{uploadform}} and ng-click不起作用。顺便说一句，这是一个使用 Angular Js 框架时包含 HTML 的不良做法。