ng-click 未在控制器初始化后稍后呈现的 table td 单击上触发控制器功能

Question

我想在 table 的 td 元素上调用 ng-click 时调用的控制器（在页面加载时初始化）中触发一个函数，该元素是在 select 从HTML 页中的 select 框。

使用 ui-router，我在单击菜单项时加载 HTML 页面及其控制器。此 HTML 包含一个带有组合框（select 标记）的表单，其中包含一些选项。我还有一个 div，它是 table 的容器，而 div 在页面加载时是空的。当从组合框中 select 编辑某些选项时，我有一个自定义指令执行更改事件并在容器 div 内，使用纯 JavaScript 创建 table并加载了从 Ajax 调用接收到的数据。 table 中的 TD 有一个 ng-click 出现在它们上面，它应该触发控制器中存在的一个功能，但实际上并没有发生。我是 AngularJS 的新手，因此我们将不胜感激。

我尝试在呈现 table 之后在自定义指令内的 $scope 变量（在 JavaScript 的 setTimeout 函数内）上使用 $digest、$apply。但更改不适用。

HTML代码

<div ng-app="myApp">
<div ui-view>
<div id="mainContainer" align="center">
    <form name="form1" id="formWithSelect" ng-init="loadSelectList()">
        <div align="left">
            <p style="display: inline-block; font-size: 1.30em;">Please select an option to fetch list.</p>
        </div>
        <div align="left" style="margin-left: 10px;">
            <label class="align_label">Select Option :</label> <select
                name="listItems"
                ng-model="listInfo.id" id="list_of_options"
                get-list=""
                data-enhance="false"
                ng-options="option.id as option.name for option in listItems required><option
                    value="">Select Item</option></select>
            <p ng-if="form1.listItems.$dirty && form1.listItems.$error.required" class="invalidMessage">Select Item</p>
        </div>
    </form>
    <div id="tableContainer"></div>
</div>
</div>
</div>

AngularJS代码


var tableApp = angular.module("myApp", ['ui.router','uiRouterStyles','flow']);
tableApp.controller("ListCtrl", function($scope){

    $scope.loadSelectList = function(){
        $scope.listItems = manager.getListItems();
    };

    $scope.getItemInfo = function(event){
        alert("Need a pop up!!!");
        event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true);
    };
});

tableApp.directive("getList", function(){
    return {
        restrict: "A",
        link: function ($scope,elm) {
            elm.on('change', function (ev){
               if(ev.currentTarget.value == ""){
                   $("#tableContainer").css("display","none").empty();
                }
                else{
                    $("#tableContainer").empty();
                    manager.getTableData();
                    tableDataView.viewTable();
                }
               setTimeout(function() {
                   $scope.$digest();
               }, 1000);
               ev.stopPropagation();
            });
        }
    }
});

UI router

.state('change-table-data', {
            url: '/change/table/data',
            templateUrl: 'ChangeTable.html',
            controller: 'ListCtrl',
            data: {
                  css: ['stylesheet1.css','stylesheet2.css']
                }
        })

预期输出

<div ng-app="myApp">
<div ui-view>
<div id="mainContainer" align="center">
    <form name="form1" id="formWithSelect" ng-init="loadSelectList()">
        <div align="left">
            <p style="display: inline-block; font-size: 1.30em;">Please select an option to fetch list.</p>
        </div>
        <div align="left" style="margin-left: 10px;">
            <label class="align_label">Select Option :</label> <select
                name="listItems"
                ng-model="listInfo.id" id="list_of_options"
                get-list=""
                data-enhance="false"
                ng-options="option.id as option.name for option in listItems required><option
                    value="">Select Item</option></select>
            <p ng-if="form1.listItems.$dirty && form1.listItems.$error.required" class="invalidMessage">Select Item</p>
        </div>
    </form>
    <div id="tableContainer">
<table>
<thead>
<tr>
<th>Serial Number</th>
<th>Item ID</th>
<th>Item Name</th>
</tr>
</thead>
<tr>
<td ng-click="getItemInfo($event)">1</td>
<td ng-click="getItemInfo($event)">I101</td>
<td ng-click="getItemInfo($event)">ABC</td>
</tr>
<tr>
<td ng-click="getItemInfo($event)">2</td>
<td ng-click="getItemInfo($event)">I102</td>
<td ng-click="getItemInfo($event)">XYZ</td>
</tr>
</table>
</div>
</div>
</div>
</div>

如上图预期输出部分所示，呈现 table 并且每个 td 都具有 ng-click 功能。单击此 td 时，我需要控制器中存在的 getItemInfo() 来触发未发生的情况。

Answer 1

我找到了答案。我需要将 $compile 服务传递给

getList directive

并在指令内而不是

setTimeout(function() {
                   $scope.$digest();
               }, 1000);

函数，应该是

setTimeout(function() {
                       $compile($("#tableContainer"))($scope);
                   }, 1000);

我现在可以触发控制器功能了

getItemInfo

ng-click 未在控制器初始化后稍后呈现的 table td 单击上触发控制器功能

ng-click not triggering a controller function on a table td click which is rendered later after the controller is initialized

html

javascript

angularjs

angularjs-directive