ng-click не вызывает функцию контроллера для таблицы td click, который визуализируется позже после инициализации контроллера - PullRequest
Новая
       17

ng-click не вызывает функцию контроллера для таблицы td click, который визуализируется позже после инициализации контроллера

0 голосов
/ 20 апреля 2019

Я хочу вызвать функцию в контроллере (инициализированную при загрузке страницы), вызываемую при нажатии ng-click на элементе таблицы td, который загружается после выбора какой-либо опции из поля выбора на странице HTML.

Используя ui-router, я загружаю HTML-страницу с ее контроллером по нажатию пункта меню.Этот HTML-код содержит форму со списком (выбрать тег) с некоторыми опциями.Также у меня есть div, который является контейнером для таблицы, и div пуст для загрузки страницы.Когда в поле со списком выбирается какой-либо параметр, у меня есть пользовательская директива, которая выполняет событие изменения, и внутри контейнера div создается таблица с использованием чистого JavaScript и загружается данные, полученные из вызова Ajax.TD в этой таблице имеют ng-click на них, который должен запускать функцию, присутствующую в контроллере, которая не происходит.Я новичок в AngularJS и, следовательно, любая полученная помощь будет оценена.

Я пытался использовать $ digest, $ apply для переменной $ scope (внутри функции setTimeout JavaScript) внутри пользовательской директивы после визуализации таблицы.Но изменения не применяются.

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>

Как показано вышев разделе «Ожидаемый вывод» отображается таблица, и над каждым из них есть функция ng-click.По щелчку этого тд, мне нужно, чтобы getItemInfo () присутствовал в контроллере для запуска, который не происходит.

1 Ответ

0 голосов
/ 22 апреля 2019

Я нашел ответ.Мне нужно было передать службу $ compile в

getList директиву

и внутри директивы вместо 

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

функции, это должно было быть 

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

Теперь я могу запустить функцию контроллера

getItemInfo

...