Функция 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 не скомпилирован, а угловой не сможет t риггер любого из ваших слушателей шаблонов (ng-click, ng-change и т. д.)

Answer 3

возможного дублирования на этот вопрос:

Clicking a checkbox with ng-click does not update the model

изменения ng-click к ng-change