At first, when trying to manipulate a DOM with jQuery, you are tempted to do it in the controller. That is highly discouraged to enforce the concept of declarative approach.
Here is a very simple concept of DOM manipulation in AngularJS.
For example, say we have a box, and on click we want to fade it out.
The html would look like this (including 3 ways to pass in value):
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div
class="box"
data-ng-click="boxClick(100)"
data-mm-box="200"
data-fade-duration="300">
</div>
</div>
</div>
simple css:
.box {
width: 100px;
height: 100px;
background-color: red;
}
And the javascript:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.boxClick = function(value) {
this.doBoxClick(value);
};
}
myApp.directive("mmBox", function() {
return {
link: function(scope, elem, attrs) {
var duration = parseInt(attrs.mmBox);
scope.doBoxClick = function(value) {
console.log("1. " + value);
console.log("2. " + attrs.mmBox);
console.log("3. " + attrs.fadeDuration);
elem.fadeOut(duration);
}
}
}
});
Notice I put in two other ways to pass in values so the directive is not hard coded to any value and can be reused.