Модифицировать DOM (ячейку таблицы) через угловую директиву после изменения области видимости

У меня есть многомерный массив, внедряемый в область просмотра, которая содержит данные о посещаемости для студентов. По сути, это цифровой лист посещаемости, отражающий множество записей. Я использую angularjs для выполнения вызовов XHR, которые могут асинхронно изменять отдельные записи.

Проблема: Как только я изменяю отдельную запись, например: изменяя A (отсутствует) на P (присутствует) через ajax, я хотел бы добавить или удалить класс css для этой конкретной ячейки таблицы. Однако директивы выполняются при связывании, и мне нужно, чтобы они выполнялись после того, как я изменил запись через ajax, еще долго после привязки данных.

Это было довольно легко сделать в контроллере с помощью jQuery, прямо в функции успеха вызовов PUT. Но это не "угловой" способ изменить дом. Тем не менее, из того, что я читал, очевидно, что также плохо модифицировать DOM после привязки. Конечно, есть способ сделать это "правильно" с помощью angular... Я надеялся, что вы, ребята, могли бы внести некоторую ясность. Идеи высоко ценятся.

Вот вызов PUT в контроллере, который проходит и соответствующим образом изменяет область после завершения PUT, а затем использует jQuery, который я упомянул до изменения ячейки:

$http.put("/api/attendance/PutAttendRecord/", stuInfo)
.then(function (d) {
    var dt = d.data.class_date_am;
    var dc = d.data.dc_number;
    var st = d.data.status_am;

    $scope.classlist.forEach(function (obj) {
        if (dc == obj.DcNumber) {
            obj.Attend.forEach(function (attObj) {
                if (dt == attObj.ClassDate) {
                    var el = $scope.thisElement.parentNode;

                    if ($(el).hasClass("statusupdated")) {
                        $(el).removeClass("statusupdated");
                    } else { $(el).addClass("statusupdated"); }

                    attObj.Status = st;
                }
            })
        }
    })
})

Вот директива, которая на данный момент не выполняет ничего, кроме журнала консоли.

var updateRecord = function () {

    var directive = {
        link: link
    }
    return directive;
    function link(scope, element, attrs) {
        console.log(element.val());
    }
}

app.controller("ModifyRecordController", ModifyRecordController)
.directive("updateRecord", updateRecord);

Спасибо!

0 ответов

Другие вопросы по тегам