#{code}Example paragraph with some text.
28 |{{text}}
21 | {% endraw %} 22 | {% endprism %} 23 | 24 | The directive is especially interesting since it uses `ng-model` instead of custom attributes. 25 | 26 | {% prism javascript %} 27 | app.directive("contenteditable", function() { 28 | return { 29 | restrict: "A", 30 | require: "ngModel", 31 | link: function(scope, element, attrs, ngModel) { 32 | 33 | function read() { 34 | ngModel.$setViewValue(element.html()); 35 | } 36 | 37 | ngModel.$render = function() { 38 | element.html(ngModel.$viewValue || ""); 39 | }; 40 | 41 | element.bind("blur keyup change", function() { 42 | scope.$apply(read); 43 | }); 44 | } 45 | }; 46 | }); 47 | {% endprism %} 48 | 49 | You can find the complete example on [github](https://github.com/fdietz/recipes-with-angular-js-examples/tree/master/chapter8/recipe6). 50 | 51 | ### Discussion 52 | The directive is restricted for usage as an HTML attribute since we want to use the HTML5 contenteditable attribute as it is instead of defining a new HTML element. 53 | 54 | It requires the `ngModel` controller for data binding in conjunction with the link function. The implementation binds an event listener, which executes the `read` function with [apply](http://docs.angularjs.org/api/ng.$rootScope.Scope). This ensures that even though we call the `read` function from within a DOM event handler we notify Angular about it. 55 | 56 | The `read` function updates the model based on the view's user input. And the `$render` function is doing the same in the other direction, updating the view for us whenever the model changes. 57 | 58 | The directive is surprisingly simple, leaving the `ng-model` aside. But without the `ng-model` support we would have to come up with our own model-attribute handling which would not be consistent with other directives. 59 | -------------------------------------------------------------------------------- /common-user-interface-patterns/filtering-and-sorting-a-list.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Filtering and Sorting a List 4 | chapter: common-user-interface-patterns 5 | order: 1 6 | source_path: common-user-interface-patterns/source/recipe1 7 | --- 8 | 9 | ### Problem 10 | You wish to filter and sort a relatively small list of items all available on the client. 11 | 12 | ### Solution 13 | For this example we will render a list of friends using the `ng-repeat` directive. Using the built-in `filter` and `orderBy` filters we will filter and sort the friends list client-side. 14 | 15 | {% prism markup %} 16 | {% raw %} 17 | 18 || Id | 22 |Name | 23 |Description | 24 |
|---|---|---|
| {{item.id}} | 29 |{{item.name}} | 30 |{{item.description}} | 31 |35 | 37 | | 38 | 39 |
| Id | 7 |Name | 8 |Description | 9 |
|---|---|---|
| {{item.id}} | 14 |{{item.name}} | 15 |{{item.description}} | 16 |20 | 33 | | 34 | 35 |
| Id | 7 |Name | 8 |Description | 9 |
|---|---|---|
| {{item.id}} | 14 |{{item.name}} | 15 |{{item.description}} | 16 |20 | 33 | | 34 | 35 |
| Id | 7 |Name | 8 |Description | 9 |
|---|---|---|
| {{item.id}} | 14 |{{item.name}} | 15 |{{item.description}} | 16 |20 | 21 | | 22 | 23 |
{{flash.getMessage()}}
11 |{{text}}
5 | -------------------------------------------------------------------------------- /common-user-interface-patterns/source/recipe6/style.css: -------------------------------------------------------------------------------- 1 | [contenteditable] { 2 | border: 2px dotted #ccc; 3 | background-color: #eee; 4 | padding: 2px; 5 | } -------------------------------------------------------------------------------- /consuming-external-services/consuming-jsonp-apis.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Consuming JSONP APIs 4 | chapter: consuming-external-services 5 | order: 3 6 | --- 7 | 8 | ### Problem 9 | You wish to call a JSONP API. 10 | 11 | ### Solution 12 | Use the `$resource` service and configure it to use JSONP. As an example we will take the Twitter search API here. 13 | 14 | The HTML template lets you enter a search term in an input field and will render the search result in a list. 15 | 16 | {% prism markup %} 17 | {% raw %} 18 | 19 |{{value}}
20 |{{value}}
38 | 39 |{{value}}
31 |{{getIncrementedValue()}}
31 |{{greeting}}
34 |{{value}}
4 |{{value}}
5 |{{getIncrementedValue()}}
4 |{{greeting}}
5 |Hello World
20 |Hello World
55 |{{text}}
", 32 | link: linkFunction 33 | }; 34 | }); 35 | {% endprism %} 36 | 37 | This renders a paragraph with the text passed as the param. 38 | 39 | ### Discussion 40 | The link function has access to the element and its attributes. It is therefore straightforward to set the scope to the text passed as the attributes value and use this in the template evaluation. 41 | 42 | The scope context is important though. The `text` model we changed might already be defined in the parent scope and used in another part of your app. In order to isolate the context and thereby use it only locally inside your directive, we have to return an additional scope attribute. 43 | 44 | {% prism javascript %} 45 | return { 46 | restrict: "A", 47 | template: "{{text}}
", 48 | link: linkFunction, 49 | scope: {} 50 | }; 51 | {% endprism %} 52 | 53 | In Angular this is called an isolate scope. It does not prototypically inherit from the parent scope and is especially useful when creating reusable components. 54 | 55 | Let's look into another way of passing params to the directive. This time we will define an HTML element `my-widget2`. 56 | 57 | {% prism javascript %} 58 |{{text}}
", 64 | scope: { 65 | text: "@text" 66 | } 67 | }; 68 | }); 69 | {% endprism %} 70 | 71 | The scope definition using `@text` is binding the text model to the directive's attribute. Note that any changes to the parent scope `text` will change the local scope `text`, but not the other way around. 72 | 73 | If you want instead to have a bi-directional binding between the parent scope and the local scope, you should use the `=` equality character: 74 | 75 | {% prism javascript %} 76 | scope: { 77 | text: "=text" 78 | } 79 | {% endprism %} 80 | 81 | Changes to the local scope will also change the parent scope. 82 | 83 | Another option would be to pass an expression as a function to the directive using the `&` character. 84 | 85 | {% prism markup %} 86 |{{text}}
", 98 | link: linkFunction, 99 | scope: { 100 | fn: "&fn" 101 | } 102 | }; 103 | }); 104 | {% endprism %} 105 | 106 | We pass the attribute `fn` to the directive and since the local scope defines `fn` accordingly we can call the function in the `linkFunction` and pass in the expression arguments as a hash. 107 | -------------------------------------------------------------------------------- /directives/rendering-a-directives-dom-node-children.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Rendering a Directive's DOM Node Children 4 | chapter: directives 5 | order: 4 6 | source_path: directives/source/recipe4 7 | --- 8 | 9 | ### Problem 10 | Your widget uses the child nodes of the directive element to create a combined rendering. 11 | 12 | ### Solution 13 | Use the `transclude` attribute together with the `ng-transclude` directive. 14 | 15 | {% prism markup %} 16 |This is my paragraph text.
18 |Hello World
" 28 | }; 29 | }); 30 | {% endprism %} 31 | 32 | ### Discussion 33 | This will render the Hello World paragraph as a child node of your `my-widget` element. If you want to replace the element entirely with the paragraph you will also have to return the `replace` attribute: 34 | 35 | {% prism javascript %} 36 | app.directive("myWidget", function() { 37 | return { 38 | restrict: "E", 39 | replace: true, 40 | template: "Hello World
" 41 | }; 42 | }); 43 | {% endprism %} 44 | 45 | Another option would be to use a file for the HTML snippet. In this case you will need to use the `templateUrl` attribute, for example as follows: 46 | 47 | {% prism javascript %} 48 | app.directive("myWidget", function() { 49 | return { 50 | restrict: "E", 51 | replace: true, 52 | templateUrl: "widget.html" 53 | }; 54 | }); 55 | {% endprism %} 56 | 57 | The `widget.html` should reside in the same directory as the `index.html` file. This will only work if you use a web server to host the file. The example on Github uses angular-seed as bootstrap again. 58 | -------------------------------------------------------------------------------- /directives/repeatedly-rendering-directives-dom-node-children.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: recipe 3 | title: Repeatedly Rendering Directive's DOM Node Children 4 | chapter: directives 5 | order: 6 6 | source_path: directives/source/recipe6 7 | --- 8 | 9 | ### Problem 10 | You wish to render an HTML snippet repeatedly using the directive's child nodes as the "stamp" content. 11 | 12 | ### Solution 13 | Implement a compile function in your directive. 14 | 15 | {% prism markup %} 16 |This is the paragraph.
19 | 20 | {% endprism %} 21 | 22 | {% prism javascript %} 23 | var app = angular.module("MyApp", []); 24 | 25 | app.directive("repeatNtimes", function() { 26 | return { 27 | restrict: "E", 28 | compile: function(tElement, attrs) { 29 | var content = tElement.children(); 30 | for (var i=1; i