ng-click 不会在表 td click 上触发控制器功能，该功能在控制器初始化后稍后呈现

Question

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

使用 ui-router，我在单击菜单项时使用其控制器加载 HTML 页面。此 HTML 包含一个带有组合框（选择标记）的表单，其中包含一些选项。我也有一个 div，它是一个表格的容器，并且 div 在页面加载时是空的。当从组合框中选择某个选项时，我有一个执行更改事件的自定义指令，在容器 div 内，使用纯 JavaScript 创建一个表并加载从 Ajax 调用接收的数据。此表中的 TD 上有一个 ng-click，这应该会触发控制器中没有发生的功能。我是 AngularJS 的新手，因此收到的任何帮助将不胜感激。

在表格呈现后，我尝试在自定义指令内的 $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>

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

Answer 1

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

getList 指令

并在指令内部而不是

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

函数，应该是

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

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

getItemInfo