Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<div ng-controller="MyCtrl">
<div id="me" style= "background-color:yellow;" my-directive>
<div id="myDiv" class="myDiv">TEST</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
myApp.directive('myDirective', function() {
return {
link: function(scope,elem) {
//var myDivElement = elem #myDiv;
var myDivElement = angular.element(elem[0].querySelector('.myDiv'));
elem.bind('click', function() {
elem.css('background-color','red');
myDivElement.css('color','blue');
console.log('Element clicked');
scope.$apply(function() {
scope.color = "red";
});
});
}
}
});
function MyCtrl($scope) {
}