Javascript功能未執行

Question

我有一個角度應用程序，可以動態顯示一些HTML，在該html中，我有一個復選框，該復選框應選擇所有子復選框，函數名稱為：chkallonclick，但是從不執行。

我檢查了html並顯示了ng-click屬性，我還放置了調試器行，但從未命中。

controller.js

function renderdata() {
    debugger;
    var detailrules = new Array();
    var strhtml = "";
    strhtml += "<table id='tblContentHeader' style='width:100px;float:left;margin-left:21px;padding-top:15px'>";
    strhtml += drawheader();
    strhtml += "<tbody>";

    if (vm.listRules.length > 0) {
        for (var i = 0; i < vm.listRules.length; i++) {
            strhtml += "<tr>";
            strhtml += "<td style='width:20px;text-align:center;background-color:white;'>";
            strhtml += "<input type='checkbox' ruleid='" + vm.listRules[i].RuleId + "' id='chk_" + vm.listRules[i].RuleId + "'>";
            strhtml += "</td>";
            strhtml += "<td style='width:20px;text-align:center;background-color:white;'>";
            strhtml += "<div data-icon='Expand' LineId='" + vm.listRules[i].RuleId + "' Expanded='false' ng-click='expand_details()' style='cursor:pointer;height:14px;width:17px;' id='Expand" + vm.listRules[i].RuleId + "'></div>";

            strhtml += "</td>";
            strhtml += "<td style='width:200px;text-align:center;background-color:white;'>";
            strhtml += "<label style='font-family:Verdana;font-size:10px;'>" + vm.listRules[i].RuleName + "</label>";
            strhtml += "</td>";
            if (vm.listFarmsRules.length > 0) {
                detailrules = Enumerable.From(vm.listFarmsRules).Where(function(x) {
                    return x.RuleId == vm.listRules[i].RuleId
                }).ToArray();
            }
            strhtml += "</tr>";
            strhtml += "<tr style='display:none;' id='CurrentRow" + vm.listRules[i].RuleId + "'>";
            strhtml += "<td colspan='18' style='padding: 0px;margin: 0px;border: 0px;'>";
            strhtml += "<div id='DivDetails" + vm.listRules[i].RuleId + "' style='margin:10px 10px;border:1px solid #a5a5a5;visibility:hidden;height:200px;background-color:white;'>" + renderdetails(detailrules) + "</div>";
            strhtml += "</td>";
            strhtml += "</tr>";

        }
    }
    strhtml += "</tbody>";
    strhtml += "</table>";

    $('#tablerules').html(strhtml);
    $compile(document.getElementById("tablerules"))(vm);


}

function drawheader() {
    var strhtmlheader = "";
    strhtmlheader += "<thead>"
    strhtmlheader += "<tr>"
    strhtmlheader += "<th>"
    strhtmlheader += "<input type='checkbox' id='chkall' ng-click='chkallonclick()'>"
    strhtmlheader += "</th>"
    strhtmlheader += "<th>"
    strhtmlheader += "<label id='lblrule' style='margin:5px;font-family:Verdana;font-size:10px;'>Reglas</label>"
    strhtmlheader += "</th>"
    strhtmlheader += "<th>"
    strhtmlheader += "<img src=''/>"
    strhtmlheader += "</th>"
    strhtmlheader += "</tr>"
    strhtmlheader += "</thead>"

    return strhtmlheader;
}

function renderdetails(details) {
    var strhtmldetails = "";
    strhtmldetails += "<table style='width:100%'>";
    strhtmldetails += "<thead style='display:block;'>";
    strhtmldetails += "<tr>";
    strhtmldetails += "<th>";
    strhtmldetails += "</th>";
    strhtmldetails += "<th style='text-align:center;width:120px;height:10px;background-color:#dadada;'>";
    strhtmldetails += "<label>Finca</label>";
    strhtmldetails += "</th>";
    strhtmldetails += "</tr>";
    strhtmldetails += "</thead>";
    strhtmldetails += "<tbody>";
    if (details.length > 0) {
        for (var i = 0; i < details.length; i++) {
            strhtmldetails += "<tr>";
            strhtmldetails += "<td>";
            strhtmldetails += "<img src='' detailid='" + details[i].FarmRuleId + "' id='img_" + details[i].FarmRuleId + "'/>";
            strhtmldetails += "</td>";
            strhtmldetails += "<td style='text-align:center;'>";
            strhtmldetails += "<label>" + details[i].Farm + "</label>";
            strhtmldetails += "</td>";
            strhtmldetails += "</tr>";
        }
    } else {
        strhtmldetails += "<tr>";
        strhtmldetails += "<td style='text-align:center;'>";
        strhtmldetails += "<select>";
        for (var j = 0; j < vm.listAvailableFarms.length; j++) {
            strhtmldetails += "<option value='" + vm.listAvailableFarms[j].BusinessUnitId + "'>" + vm.listAvailableFarms[j].Code + "";
        }
        strhtmldetails += "</option>";
        strhtmldetails += "</select>";
        strhtmldetails += "</td>";
        strhtmldetails += "</tr>";
    }

    strhtmldetails += "</tbody>";
    strhtmldetails += "</table>";

    return strhtmldetails;

}

function expand_details(e) {
    e = event.srcElement;
    var Validate = e.getAttribute("Expanded");
    var CurrentExpand = e.id;
    var LineId = e.getAttribute("LineId");

    if (Validate == 'false') {
        $("#" + CurrentExpand).attr('data-icon', 'Collapse')
        $("#" + CurrentExpand).attr('Expanded', 'true');
        $("#CurrentRow" + LineId).toggle();
        $("#DivDetails" + LineId).toggle();
        $("#DivDetails" + LineId).css("visibility", "visible");

    } else {
        $("#" + CurrentExpand).attr('data-icon', 'Expand')
        $("#" + CurrentExpand).attr('Expanded', 'false')
        $("#CurrentRow" + LineId).hide();
        $("#DivDetails" + LineId).hide();
        $("#DivDetails" + LineId).css("visibility", "hidden");
    }
}

function chkallonclick(e) {
    debugger;
    e = event.srcElement;
    var $AllCheck = $("#tblContentHeader").find("input:checkbox").not("#chkall");

    if (e.checked == true) {

        $AllCheck.each(function() {
            if (!$(this).is(":disabled"))
                this.checked = true;
        });

    } else {

        $AllCheck.each(function() {
            this.checked = false;
        });
    }
}

視圖

<!--<script src="../Scripts/linq.min.js" type="text/javascript"></script>-->
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="estimate row">
            <div class="col-md-12 estimate__header">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-lg-12 col-md-12">
                        <h4 class="estimate__header__title">Bienvenido, <span class="estimate__username">{{user.code}}</span></h4>


                        <button class="gs__btn gs__btn--icon pull-right" ng-click="logOut()">
                            <img src="../../Images/icon_salir.png" />
                        </button>
                    </div>
                </div>
            </div>

            <div style="width:150px;display:inline-block;float:left;margin-left:10px">
                <h4 style="margin-left:10px" class="allocation__header__title">Regla</h4>
                <select style="margin-left:10px" ng-model="selectedRule" ng-options="item.RuleName as item.RuleName for item in listRules">
                    <option value="">Seleccione Regla</option>
                </select>
            </div>

            <div style="width:150px;display:inline-block">
                <h4 style="margin-left:10px" class="allocation__header__title">Año</h4>
                <select style="margin-left:10px" ng-model="selectedYear" ng-options="item.Year as item.Year for item in listYears | orderBy:'Year'">
                    <option value="">Seleccione Año</option>
                </select>
            </div>

            <div class="row" style="padding-top:15px">
                <div class="col-md-12">
                    <div class="pull-right">
                        <button ng-click="load()" class="gs__btn gs__btn--primary">
                            <img src="../../Images/icon_cargar.png" alt="" />
                            <span class="gs__btn--text">Cargar</span>
                        </button>
                        <button style="margin-right:21px" id="save" ng-click="save()" class="gs__btn gs__btn--disabled">
                            <img src="../../Images/icon_enviar.png" alt="" />
                            <span class="gs__btn--text">Enviar</span>
                        </button>
                    </div>
                </div>
                <br>
            </div>

            <div id="tablerules" style="width:150px;padding-top:25px">

            </div>

            <div class="col-xs-12 col-sm-12 progressbar--fixedBottom" ng-show="isShowProgress">
                <div>
                    <uib-progressbar animate="true" value="currentPackages" max="totalPackages" type="success">
                        <span style="color:black; white-space:nowrap;">{{currentPackages}} / {{totalPackages}}</span>
                    </uib-progressbar>
                </div>
            </div>

            <div class="panel-group estimate__panel__error--fixedBottom" ng-show="errors.length > 0" ng-click="showErrors()">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            Errores en la hoja de excel <span class="badge badge--red pull-right">{{errors.length}} +</span>
                        </h4>
                    </div>
                    <div class="panel-body scroll-y">
                        <ul class="list-group">
                            <li class="list-group-item withoutBorder" ng-repeat="e in errors track by $index">
                                Ha ocurrido un error en la columna: {{e.column}}, <br /> {{e.message}} en la fila: {{e.row}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

問題在於chkallonclick沒有暴露在范圍內。

Angular會針對當前范圍評估ng-click / ng-whatever ，您的函數未綁定到任何范圍。 您必須將該函數綁定到作用域（通過使用$scope服務或帶有bindToController:true / controllerAs:'myCtrl'的指令控制器）

Answer 2

您將需要將生成的html包裝到Anguler.element（）中。

Anguler.element（）

這是因為否則您生成的html不會被編譯，而angular將無法觸發您的任何模板偵聽器（ng-click，ng-change等）

Answer 3

這個問題可能重復：

用ng-click單擊復選框不會更新模型

將ng-click ng-change為ng-change