javascript - コントローラー内からjQuery DOM操作をトリガーする正しい方法は何ですか?

Question

したがって、コントローラー内からのjQuery操作は悪い習慣であると読み続けていますが、その理由や修正方法については明確ではありません。

以下は、ビデオ作成者のコメントでさえ悪い考えであるYoutubeチュートリアルのコードですが、理由を説明せず、とにかく悪い動作を使用し続けています.

https://www.youtube.com/watch?v=ilCH2Euobz0#t=553sから:

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

解決策:

以下のラングドンの回答に基づいて、私は自分の作業用に次の作業コードに到達しました。これは、上記のサンプルコードからわずかに派生しています。

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)
                }
            });
        }
    }
});

これは、いくつかの点でラングドンの答えとは異なります。ngClickコールバックにパラメータを追加することは避けたかったので、 thisProject. また、例と私のコードは成功のコールバックdestroy内から呼び出す必要があるため、どちらが関連しなくなったかの代わりに、クリックされた要素を に保存しています。$httpthisthisElem

更新 2 :

funcComplete が元の $scope を実際に変更していないことを反映するために、私のソリューションをさらに更新しました。