From e8edbfa3581bac294873c5fbb1123929386ca5c1 Mon Sep 17 00:00:00 2001 From: cameronjacoby Date: Thu, 14 Jan 2016 11:02:17 -0800 Subject: [PATCH] add custom directives reading --- custom-directives.md | 116 +++++++++++++++++++++++++++++++++++++++++++ readme.md | 6 ++- 2 files changed, 121 insertions(+), 1 deletion(-) create mode 100644 custom-directives.md diff --git a/custom-directives.md b/custom-directives.md new file mode 100644 index 0000000..5099ccc --- /dev/null +++ b/custom-directives.md @@ -0,0 +1,116 @@ +# Custom & External Angular Directives + +Directives are snippets of HTML with their own custom JavaScript logic. Angular's concept of directives helps separate concerns and duties of code while making your views DRY and logic-less. Angular directives are very modular and can be added, shared, and swapped between projects. Check out ng-modules to find popular Angular Directives to add to your projects. + +## Adding an External Directive + +Sometimes when you're looking to solve a problem, you find that another developer has already made a solution in the form of a directive. Now the challenge is how to include that directive in your project. + +1. Add the directive's file(s) to your project. +2. Include the file(s) in `index.html`. +3. Inject the directive into your app: + + ```js + // app.js + + angular.module('yourApp', ['ngResource', 'ngMap', 'pickadate', 'ui.bootstrap']); + ``` + +## Making Your Own Directive + +### A Current Weather Example + +**Follow Along** by putting these code samples into an Angular project. + +> Reference: ng-newsletter blog post on directives + +Imagine you wanted to make a box that displayed a city's current weather that was re-useable across pages for various cities. A directive would be a great solution! Let's look at how you'd build this directive that fetches a city's weather data and displays it on the page. + +Place this HTML anywhere inside your Angular controller: + +```html + + + +``` + +Add this directive to your app: + +```js +// app.js +angular.module('yourApp', []); + +app.directive('currentWeather', function() { + return { + restrict: 'E', + scope: { + city: '@' + }, + template: '

Weather for {{city}}

{{weather.main.temp}}
', + // templateUrl: 'templates/currentWeatherTemplate.html', + // transclude: true, + controller: ['$scope', '$http', + function ($scope, $http) { + var url = "http://api.openweathermap.org/data/2.5/weather?mode=json&cnt=7&units=imperial&callback=JSON_CALLBACK&q="; + $scope.getWeather = function(city) { + $http({ method: 'JSONP', url: url + city }) + .success(function(data) { + $scope.weather = data; + }); + } + }], + link: function (scope, element, attrs) { + scope.weather = scope.getWeather(attrs.city); + } + } +}); +``` + +## Angular Directive Options + +#### Restrict + +The first option in an Angular directive is the `restrict` option. This option lets you specify how exactly you'd like to call the directive in HTML. See the options below; A and E are the most popular. + +```html +'A' - +'E' - +'C' - +'M' - +``` + +#### template and templateUrl + +Using the `template` and `templateUrl` options you can define an HTML template inside the directive's JS or in a separate HTML file in the templates folder. + +#### Scope inside a Directive + +But wait a sec, how do directives interact with the `$scope` set by the local controller? Can I get data from the local controller into my directive? + +By default, scopes do inherit the scope of their local controller just like they were HTML in the template. However, you can use the `scope` option to change this default behavior to isolate your directive's scope. + +1. `scope: true` - If scope is set to `true`, then the directive will have its own child scope that inherits from the parent scope of the local controller, meaning it can still access and change the parent scope. + +2. `scope: {}` - By passing an object to the `scope` option, you can define an **isolated scope**. Inside this object you can pass in three **aliases** indicating the expected datatype: + + ```js + scope: { + ngModel: '=', // provides two-way binding + onSend: '&', // works with function calls + fromName: '@' // reads attribute value + } + ``` + + ```html + + +
+ ``` + +#### controller + +The controller option allows you to define a controller specific and isolated to the directive. + +#### link() + +The `link()` option is the meat and potatoes of the directive. Inside this function, you specify what you'd like the directive to do, and you can update scope. diff --git a/readme.md b/readme.md index 6c693df..180a4c7 100644 --- a/readme.md +++ b/readme.md @@ -37,9 +37,13 @@ * As you make code changes, frequently commit and push to GitHub. * Once you've finished the assignment and pushed your work to GitHub, make a pull request from your fork to the original repo. -## Resources +## Optional Practice * Shaping up with Angular.js - Code School Tutorial +* [Custom Directives Reading](custom-directives.md) + +## Resources + * AngularJS Developer Guide - Directives * AngularJS API Reference - Directives * AngularJS API Reference - Filter Components