AngularJS Custom Directives with Dan Wahlin

Explore the role of directives in AngularJS, their three main categories, and core concepts like the directive definition object and compile provider, with a hello world example.

Discover how directives attach behavior to DOM elements in AngularJS, implement custom directives, and leverage built-in directives for data binding, events, styling, and validation.

Learn to build a Hello World directive in AngularJS, create a directive definition object (DDO), and use a template to output Hello World, registering with angular.module().directive and using dash-case naming.

Explore directive categories in AngularJS, contrasting dom-driven, data-driven, and behavior-driven directives, and review the four directive types—attribute-based, element-based, CSS class-based, and comment-based—along with practical usage considerations.

Learn the difference between shared and isolate scope in AngularJS custom directives and how isolate scope enables reusable components by using at symbol, equals sign, and ampersand local scope properties.

Explain shared and isolate scope in AngularJS directives, showing how parent data may be inherited or blocked, and how local scope properties enable cross-boundary data binding.

Compare shared scope and isolate scope in AngularJS directives by binding controller data, then show how to pass data from the outside world with bindings and pipelines.

Use the @ local scope property to pass a string from outside into an isolate scope, creating a one-way binding through a defined pipeline.

Learn how to use AngularJS isolate scope with a string directive, passing a name via the at local scope property and rendering it from the controller.

Explore the equals local scope property to achieve two-way data binding in an AngularJS directive, using isolate-scope-with-object to bind a data source object (name and street) and observe two-way updates.

Learn how AngularJS custom directives use local scope properties to implement one-way binding, two-way binding, and function bindings, using @, =, and &.

Build dynamic directives with the link() function to manipulate the DOM, assemble a TableHelper-like directive, and apply ngModel, $parse, $eval, $compile, and $interpolate in AngularJS.

Discover how the link function enables dom manipulation in AngularJS directives using jqLite to connect scope and view. Learn key jqLite operations like addClass, css, attr, on, and find.

Explore how jQLite, a subset of jQuery, powers AngularJS link function directives, with a hands-on demo showing click, mouseenter, and mouseleave events to manipulate the DOM.

Develop a reusable AngularJS table directive named tableHelper that renders any data array into a table using an isolated scope and a column map.

Learn how to require ngModel in custom directives to enable two-way binding and access the ngModel controller, then monitor changes with observe, scope watch, modelValue, and render.

Leverage the parse service and eval function to convert directive attributes into objects without extra isolate scope properties, using scope.$eval or direct $parse invocation.

Build a Google Maps directive in AngularJS using the link function and jqLite to display the user's geolocation via the HTML5 Geolocation API, with a configurable height and width.

Explore how the compile function loads a directive template once, stamps out instances, and uses the post-link phase, with rare pre-link and the interpolate service for expressions.

This lecture examines when the AngularJS link function is appropriate, comparing DOM manipulation versus ng-repeat, and weighing maintenance against performance to choose the right tool for the job.

Explore how the Angular.js link function accesses the element, attributes, and scope. Use jqLite to handle events and DOM, and explore the compile, parse, and interpolate services.

Discover how controllers fit into custom AngularJS directives, compare the link function and controller approaches, and leverage controllerAs, isolate scope, and transclusion to build maintainable directives.

Embed a controller in a directive to manage an embedded view, leverage controllerAs with bindToController, and apply data-driven patterns that reuse AngularJS concepts instead of direct dom manipulation.

Replace a link function directive with a controller in AngularJS, highlighting differences and benefits. The demo contrasts approaches, shows an init function, and binds data via scope, ng-click, and ng-repeat.

Convert a normal scope-based controller to controllerAs syntax in a custom directive by aliasing with vm, using bindToController: true, and updating templates to reference vm properties.

Learn how to attach a controller to the TableHelper directive, use controllerAs with an external template, and balance maintainability with performance through scope watches and ng-repeat-driven rendering.

Learn how to pass data from an AngularJS directive isolate scope to a function using ampersand bindings, with two techniques: named parameter matching or invoking an external function.

Explore transclusion in directives by including dynamic content with ng-transclude, merging user-defined content into a directive's template, and updating the DOM at run time.

Learn how transclusion merges user-provided content into a custom AngularJS directive's template using ng-transclude to render task lists.

Explore how transclusion and nested directives enhance the angularjs table helper, using header mapsto to control order and dynamic sorting with an orderby function on customer data.

Explore advanced transclusion in angular directives by converting header directives into th elements inside a transcluded tr. Require the tableHelper controller to enable sorting via scope.apply when headers are clicked.

Explore bonus content on building custom directives in AngularJS, demonstrated using the customer manager app on Dan Wahlin's GitHub. See directives in action through the first demonstration of this module.

Learn to build a custom angularjs wcUnique validation directive using $asyncValidators to check email uniqueness against the server, including binding to ng-model and using a promise-based check.

The wcUnique directive demonstrates asynchronous server-side validation for unique fields using ngModel's $asyncValidators, shown here with an email check that uses AJAX to detect duplicates and display an error.

learn to build an AngularJS ajax overlay directive that automatically greys out the page and shows a spinner during ajax calls by hooking into the http interceptor pipeline.

Watch the wc-overlay directive intercept all ajax calls with an http interceptor, display a centered spinner via transclusion, apply a configurable delay, and queue multiple requests to avoid flashes.

Shows the menu highlighter directive in action, using a link function to toggle the active class on menu items based on the route, delivering a cleaner, reusable solution.