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.