Dave Smith - Deep Dive into Custom Directives - NG-Conf 2014
Why Stack Overflow recommends it
Stack Overflow users link it when answering AngularJS directive questions about isolated scope, link functions, transclusion and dynamically injected directives.
Recommended by 5 people across 5 different months, 2013 to 2016.
What it is
A 34-minute talk from ng-conf 2014 in which Dave Smith goes deep on writing custom directives in AngularJS 1.x, covering scope handling, linking, and building reusable components. It is a conference session aimed at developers already working with Angular.
What people said
Strong rec Adam · 2016-08 · Stack Overflow · on “In Angular2 how do you change a sidebar based on the active route?”
Ah, I feel that. I switched from game to web programming and had the same sort of adventure :P Here's some REALLY good resources on how to make your Angular code reusable (they were written for Angular 1.x.x, but was recommended by the Angular team in order to transition to 2, so same design ideas) [LINK] [this video] [LINK] The video in that last link is especially awesome.
Recommends Pastilhas · 2014-02 · Stack Overflow · on “injecting directives on the fly”
After many hours investigating, I came to the solution to this problem; this talk [this video] helped me a lot. I need to use Angular Directive's Isolated Scope. Here's how it works: //READER Directive var initNotes = function($scope, Note, element, $compile){ Note.find({ user: $scope.global.user._id, module: $scope.module._id }).then(function(response) { $scope.notes = response; angular.forEach($scope.notes, function(note){ var highlighted = element.find('span.highlighted'); var html = '<my-note _id="'+note._id+'" content="'+note.content+'"></my-note>'; highlighted.after($compile(html)($scope)); }); }); }; //NOTES Directive angular.module('oowli').directive('myNote', function() { var fnLink = fu
Recommends Brocco · 2014-04 · Stack Overflow · on “angularjs how to pass argument to directive”
The idea that you're looking for is called transclusion [LINK] which basically allows you to take the innards of the element your directive lives on and place it where you want inside your directive. Declaration: restrict: 'E', transclude: true, Usage in directive: <div ng-transclude></div> So in your example above, you'll need to use your directive, I'd suggest using this as an attribute here because thdatahead is not a valid tag under table or thead. <thdatahead class="widget-header"> <label class="formwidget-fieldlabel">Question Title</label> </thdatahead> app.directive 'thdatahead', () -> restrict: 'E', transclude: true, scope: true, template: '<th class="widget-header"><div ng-transclud
Recommends Chris Hermut · 2015-01 · Stack Overflow · on “Adding variables to object returned from directive declaration”
That question was basically about link function that is able to register new properties on scope. This answers my queston [LINK] . Also great ng-conf talk that answers a lot of directive's related questions [this video]
Recommends julian soro · 2015-12 · Stack Overflow · on “Reusable button directive not working”
Cool! Angular Directives were really hard to learn at first, but after some experience they will be second nature. I especially found this talk [this video] to be helpful
Cites Mark Rajcok · 2013-01 · Stack Overflow · on “What is the difference between compile and link function in angularjs”
compile function - use for template DOM manipulation (i.e., manipulation of tElement = template element), hence manipulations that apply to all DOM clones of the template associated with the directive. link function - use for registering DOM listeners (i.e., $watch expressions on the instance scope) as well as instance DOM manipulation (i.e., manipulation of iElement = individual instance element). It is executed after the template has been cloned. E.g., inside an <li ng-repeat...>, the link function is executed after the <li> template (tElement) has been cloned (into an iElement) for that particular <li> element. A $watch() allows a directive to be notified of instance scope property change