Web.Designer.Advanced.Angular-P2P

Recommendations

Info

• All file downloads are available from https://angularjs.org or on GitHub along with extensive documentation and tutorials on basic usage. • Properties defined within your controller $scope are available to render within your HTML using a straight forward ‘handlebars’ syntax. • The lightbox directive renders the markup defined by its template property in all instances, and this markup has access to the controller $scope. 001 angular.module(‘ui.directives’, []) 002 .directive(‘myLightbox’, function () { 003 “use strict” 004 return { 005 restrict: “AEC”, 006 template: “ {{lightboxText}}” 007 } 008 }; 009 //myApp.js 010 var myApp = angular.module(‘uiApp’, [‘ui. directives’,’ui.module’]); 05 Use your directive Now you can add your directive to the HTML. This can be done by attribute (A), element (E), or class (C). This can be restricted within the directive itself by changing the ‘restrict’ property. After this step we will use attributes for the rest of this tutorial. 001 002 {{title}} 003 004 005 006 007 008 009 06 Isolating directive scope This directive will only support one instance within the same controller as the same content will be displayed each time. To fix this we need to isolate the scope of the directive. Attributes can be passed to a directive and added to the scope property. We will use ‘my-content’ as an attribute. 001 angular.module(‘ui.directives’, []) 002 .directive(‘myLightbox’, function () { 003 “use strict” 004 return { 005 restrict: ‘AEC’, 006 scope: { 007 contentText: “=myContent” 008 }, 009 template: “ {{contentText}}” 010 } 011 }); 012 //modules/ui.js 013 $scope.lightboxText = “Some text that should be displayed in a lightbox”; 014 $scope.lightboxText2 = “Some different text that should be in another lightbox”; 015 //myApp.html 016 017 07 Passing functions You are not limited to just passing strings into a directive; you can pass any object in from the controller $scope. Create a new object in your controller with a text property and function that fires an alert. Now adjust the directive template property with a data-ng-click binding and you will be able to run this function from your lightbox. 001 002 {{title}} 003 004 005 006 //modules/ui.js 007 $scope.lightboxObject = { 008 text: “some text as a separate property in an object”, 009 testFunc: function(){ 010 alert(‘testFunc is running’); 011 } 012 } 013 //directives.uiDirectives.js 014 angular.module(‘ui.directives’, []) 015 .directive(‘myLightbox’, function () { 016 “use strict” 017 return { 018 restrict: ‘AEC’,
• By isolating the directive scope you can render different content across multiple instances of a directive • Functions defined within the controller $scope can be run from within a directive • Combining the data-ng-show attribute and a Boolean property in the controller makes it really easy to hide and show the lightbox 019 scope: { 020 content: “=myContent” 021 }, 022 template: “{{content. text}}click me” 023 } 024 }); 08 Toggling the lightbox To hide and show the lightbox we need a Boolean property on the $scope.lightboxObject that defaults to false. Then change $scope. lightboxObject.testFunc to a toggleView function that switches this property. 001 $scope.lightboxObject = { 002 text: “some text as a separate property in an object”, 003 visible: false, 004 toggleView: function () { 005 this.visible = !this.visible; 006 } 007 } 09 Add toggle controls Within the directive template property we need to add a close button that calls our toggleView function and a data-ng-show attribute to set the display state of the lightbox. Then add a button within your HTML that calls the toggleView function. Use the data-ng-click attribute to bind the functions. 001 //directives/uiDirectives.js 002 template: “>close{{content. text}}
Page 1 and 2: ADVANCED ANGULAR
Page 3 and 4: Contents webdesigner@imagine-publis
Page 5 and 6: THE BENEFITS OF USING ANGULAR BEFOR
Page 7 and 8: BUILD AN ANGULAR APP IN THIS GUIDE
Page 9: GET THE CODE http://www.filesilo.co
Page 13 and 14: 18 Add titles Now add a title attri
Page 15 and 16: • You should see your Gallery Tit
Page 17 and 18: 013 } 014 } 14 Hide the main image
Page 19 and 20: GET THE CODE http://www.filesilo.co
Page 21 and 22: eferencing a variable called Lists,
Page 23 and 24: e able to do with an account. This
Page 25 and 26: BE AN ANGULAR EXPERT AngularJS is a
Page 27 and 28: {{ email.label }} 7. Augment ar
Page 29 and 30: FAVOUR NG-HREF ATTRIBUTES OVER HREF
Page 31: 6. Controller methods Now we’ve g

Web.Designer.Advanced.Angular-P2P

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?