Avoiding too many Angularjs Directives -

i have following directive:

.directive('mydirective', function() {    restrict: 'a',    templateurl: 'app/templates/sometemplate/html',       }); 

in template (sometemplate.html) have following:

<div>   <div>some div</div>   <input type="button" value="button" /> </div> 

i want add behavior button , div. can go route of adding directives so:

<div>   <div div-click>some div</div>   <input type="button" value="button" button-click /> </div> 

and adding more directives , binding click events via element.bind(... there best practice? should adding behavior in 'mydirective' containing elements? via jquery or jqlite . clickable elements inside template not meant resuable..so should use jquery find elements , bind event listeners them? can see how can directives explosion using directive route, best practice?

the question me on directives should for.

it sounds me, if trying wrap functionality know other frameworks jquery directives. leads stuff like:

var app = angular.module("module.directives", []); app.directive('mydirective', function() {    restrict: 'a',    templateurl: 'app/templates/sometemplate/html',    link: function(scope, el) {      el.on("click", function() { console.log(42); });    } }); 

while possible, (at least me) considered "bad" style. difference angular is, not use dom "model" part of framework, jquery or prototype do. coming these libraries wrap head around, actually, starters, boils down this:

work scope , let changes scope reflected in dom.

the reflection part short , easy one: angular out of box (i.e. "most of time").

reconsidering example click - angular provides excellent event handlers in form of directives. ng-click example this:

<div>   <div ng-click="method()">some div</div>   <input type="button" value="button" ng-click="method2()" /> </div> 

this directive takes expression - looks bit old days, bind javascript directly elements, this:

<a href="#" onclick="method()">here</a> 

it's way different though - angular names method , method2 on current scope in. scope in depends on circumstances (i heavily suggest docs @ point)

for of our intents , purposes, lets say, configure controller inside directive earlier:

var app = angular.module("module.directives", []); app.directive('mydirective', function() {    restrict: 'a',    templateurl: 'app/templates/sometemplate/html',    controller: ['$scope', function(scope) {      scope.active = false;      scope.method = function() { console.log(42); };      scope.method2 = function() { scope.active = !scope.active };    }] }); 

you can define in many places, late during link phase of directive. can create controller in separate module. let's stick moment:

in template - when click on div scope's method called. nothing fancy, console output. method2 little bit more interesting - changes active variable on scope. , can use advantage:

<div>   <div ng-click="method()">some div</div>   <input type="button" value="button" ng-click="method2()" />   <span ng-show="active">active</span> </div> 

when click on button, span turned on , of - ng-show directive handles you.

this has gotten bit longer expected - hope though, sheds light on "best practises" (which quite dependent on want accomplish).