AngularJS Custom Directives with Dan Wahlin

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 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.

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.

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

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.

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.

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.

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.

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.

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.