Writing Directives

What people said

Strong rec Owen O Byrne · 2013-08 · Stack Overflow · on “Angular not making $http requests immediately”

This situation occurs when an event is triggered "outside" Angular, and Angular knows nothing about it. The blur event is coming from the DOM, or maybe you have an AJAX callback that triggers an update. You will notice that nothing happens until you interact with the application in some way that causes Angular to wake up. George Thomas' answer is correct - you must poke the Angular $scope to make it aware of the event - but according to the Angular developers a more correct way is to wrap your code in the $apply() function like this: $("#myElement").blur(function() { $scope.$apply(function() { $http({method: 'GET', url: '/someUrl'}); }); }); This way, errors in the code are correctly propoga

Strong rec wynnwu · 2013-09 · Stack Overflow · on “What is the best practice in Angular for creating reusable panels (ctrl & view tpl)?”

I've been working on an angular app for about two months now so I'm by no means an Angular expert, but after many nights of searching on Google, here's roughly how I do it. The key thing, and one of the greatest things in angular is scope, and the ability to isolate scope so that templates and the parent pages don't accidentally trample on each other. Parent controller: var myModule = angular.module('app', []) .controller('PanelCtrl', function($scope) { $scope.dataPassDown = { dataItem: 'some variable', dataPackage: {name: 'name', age: '20'}, someFunction: function(){ console.log('hello world');} } }); Create your directive. myModule.directive('reusableTemplate', function factory(){ return {

Recommends jusio · 2013-04 · Stack Overflow · on “design issue with AngularJS - nesting views”

There are multiple ways to solve this problem. First is very simple, and very dirty, use ng-include . E.g. create a template file called PersontTmpl.html : <div> {{person.firstName }} {{person.lastName}} </div> Now whenever you need to display a person, make sure that there is a person object in a scope, and add following line: <ng-include src="'somepathToTemplate/PersonTmpl.html'"></ng-include> Well this is dirty solution, because you will always have to expose person to the scope under the same name. Second way is to create a directive: angular.module('nameofyourmodule') .directive('person', function () { return { templateUrl: 'somepathToTemplate/PersonTmpl.html', restrict: 'AE', scope:{pe

Recommends callmekatootie · 2013-04 · Stack Overflow · on “AngularJS - $watch not triggered even though value changed”

I shifted the code to inside a directive and even then the issue occurred. I had to use `$scope.$apply()` to make it work inside the directive too (I was thinking otherwise). Anyhow, apparently, the correct way is `$scope.$apply(function() {$scope.$parent.showModal = false}); - something to do with exceptions. Its explained here [this video] around the 24 minute mark...

Recommends Paul Ryan · 2013-06 · Stack Overflow · on “Can I run code in click handlers that have their buttons dynamically injected into the DOM with AngularJS?”

Main Issue The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at [this video] . Also you might want to check out the ng-grid created by the angular-ui team at [LINK] to get an idea of how to put together a semantic grid component. Side Issue When trying to think in angular you really need to start thinking of the func

Recommends Pixic · 2013-07 · Stack Overflow · on “Difference between the 'controller', 'link' and 'compile' functions when defining a directive”

As complement to Mark's answer, the compile function does not have access to scope, but the link function does. I really recommend this video; Writing Directives [this video] by Misko Hevery (the father of AngularJS), where he describes differences and some techniques. (Difference between compile function and link function at 14:41 mark in the video [this video] ).

Recommends hgcrpd · 2013-07 · Stack Overflow · on “AngularJS - Explain why transcluded scopes must be siblings of an isolate scope”

Another subtlety that was mentioned in this talk [this video] is that if your transcluded content's scope is a child of the directive's, then the directive could clobber whatever variables the transcluded content was trying to reference in a parent scope. For example: <body ng-controller="MainCtrl"> <my-directive>{{ name }}</my-directive> </body> JS: app.controller("MainCtrl", function($scope) { $scope.name = 'foo'; }); app.directive("myDirective", function() { return { scope: {}, transclude: true, template: '<span ng-transclude></span>', controller: function($scope) { $scope.name = 'bar'; } } }); Transclusion ensures that {{name}} in the directive references 'foo' instead of 'bar'.

Recommends g00fy · 2013-07 · Stack Overflow · on “Why does less directives/more html take longer to compile than more directives/less html?”

EDIT - your repeater directive does nothing special - it is just a wrapper for ng-repeat . To understand why repeater is faster than manipulating the DOM from the controller, you need to understand how ng-repeat works, what are compilation and linking phases. AFAIR Miško Hevery - has a talk about this here [this video] There are few things you are doing in your example that cause it to be slower than angular ng-repeat Manipulating DOM in controller - don't do that ! This practice is very bad! The reason ng-repeat is faster in this case is because it compiles the DOM once and only produces copies of the repeated element for each element in the array. In your case, you are creating element from str

Recommends basarat · 2013-08 · Stack Overflow · on “Typescript + Angular”

In AngularJS your dom manipulation should go in a directive. In your case you would create a Directive for JSTree. This answer should give you a head start : How to use jsTree events with AngularJS [LINK] To learn more about directives here is a nice video from the creator of AngularJS : [this video] (I will make an AngularJS + TypeScript Directives video at some point)

Recommends mhelvens · 2013-09 · Stack Overflow · on “The difference between a compile/link function and a controller function in AngularJS?”

I'm trying to write my own AngularJS directives. I think I understand the difference between the compile and link functions. This video [this video] clears it up nicely. But I'm not sure now that I understand the role a controller plays in a directive. A directive can include a controller function, and you can inject $element , $attrs and such into it, so it can do pretty much everything that the link function can do and, I believe, the other way around. So I have two questions: Are there important technical differences between the controller function and the link function? What is best practice? What kind of work should I be doing in which?