javascript - What's the correct way to trigger jQuery DOM Manipulation from within a controller? -

so keep reading jquery manipulation within controller bad practice, i'm not clear on why, or how correct.

below code youtube tutorial video creator comments bad idea, doesn't explain why , continues use bad behavior anyway.

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

solution:

based on langdon's answer below, i've arrived @ following working code own work, derives example code above:

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

this differs langdon's answer in few ways. wanted avoid adding parameter ngclick callback, i'm storing in thisproject. also, example , code needs call destroy within $http success callback instead of this no longer relevant, i'm storing clicked element in thiselem.

update 2:

updated solution further reflect funccomplete not modifying original $scope.

the angular way handle through directive. found perfect example cover you're asking below, although it's not clean i'd like. idea create directive used html attribute. when element gets bound scope of controller, link function fired. function fades element in (totally optional) , exposes destroy method controller call later.

update: modified based on comments affect scope. not thrilled solution, , it's jankier because original author called complete.apply(scope) in destroy callback, doesn't use this inside callback function.

update 2: since directive 1 making callback asynchronous, it's better idea use scope.$apply there, keep in mind that might weird if ever use isolated scope in directive.

http://jsfiddle.net/langdonx/k4kx8/114/

html:

<div ng-controller="myctrl">   <ul>       <li ng-repeat="item in items" fadey="500">           {{item}}           <a ng-click="clearitem(item)">x</a>       </li>   </ul>   <hr />   <button ng-click="items.push(items.length)">add item</button>     </div> 

javascript:

var myapp = angular.module('myapp', []);  //myapp.directive('mydirective', function() {}); //myapp.factory('myservice', function() {});  function myctrl($scope) {     $scope.items = [0, 1, 2];      $scope.clearitem = function(item) {         var idx = $scope.items.indexof(item);         if (idx !== -1) {             //injected repeater scope fadey directive             this.destroy(function() {                 $scope.items.splice(idx, 1);             });         }     }; }  myapp.directive('fadey', function() {     return {         restrict: 'a', // restricts use of directive (use attribute)         link: function(scope, elm, attrs) { // fires when element created , linked scope of parent controller             var duration = parseint(attrs.fadey);             if (isnan(duration)) {                 duration = 500;             }             elm = jquery(elm);             elm.hide();             elm.fadein(duration)              scope.destroy = function(complete) {                 elm.fadeout(duration, function() {                     scope.$apply(function() {                         complete.$apply(scope);                     });                 });             };         }     }; }); 

as why, think it's separation of concerns , perhaps usability. controller should concerned data flow , business logic, not interface manipulation. directives should ideally written usability (as in case of fadey here -- ed. note: wouldn't call fadey ;)).