Czytam więc, że manipulacja jQuery z poziomu kontrolera jest złą praktyką, ale nie wiem, dlaczego i jak poprawić.

Poniżej znajduje się kod z samouczka Youtube, który nawet twórca wideo komentuje jest złym pomysłem, ale i tak nie wyjaśnia dlaczego i nadal używa złego zachowania.

Zhttps://www.youtube.com/watch?v=ilCH2Euobz0#t=553s :

$scope.delete = function() {
    var id = this.todo.Id;
    Todo.delete({id: id}, function() {
        $('todo_' + id).fadeOut();
    });
};

ROZWIĄZANIE:

Na podstawie poniższej odpowiedzi Langdona dotarłem do następującego kodu roboczego dla mojej pracy, który wywodzi się nieco z powyższego kodu przykładowego:

var ProjectListCtrl = function ($scope, Project) {
    $scope.projects = Project.query();
    $scope.delete = function() {
        var thisElem = this;
        var thisProject = thisElem.project;
        var id = thisProject.id;
        Project.delete({id: id}, function() {
            var idx = $scope.projects.indexOf(thisProject);
            if (idx !== -1) {
                thisElem.destroy('removeItem('+idx+')');
            }
        });
    }

    $scope.removeItem = function(idx) {
        $scope.projects.splice(idx, 1);
    }

}

app.directive('fadeOnDestroy', function() {
    return function(scope, elem) {
        scope.destroy = function(funcComplete) {
            elem.fadeOut({
                complete: function() {
                    scope.$apply(funcComplete)
                }
            });
        }
    }
});

Różni się to od odpowiedzi Langdona na kilka sposobów. Chciałem uniknąć dodawania parametru dongClick callback, więc przechowuję go wthisProject. Również przykład i mój kod muszą zadzwonićdestroy od wewnątrz$http oddzwanianie powodzenia zamiastthis co nie jest już istotne, przechowuję kliknięty element wthisElem.

AKTUALIZACJA 2:

Zaktualizowałem moje rozwiązanie, aby odzwierciedlić, że funcComplete nie modyfikował oryginalnego zakresu $.