Web.Designer.Advanced.Angular-P2P

001
002 The title of my lightbox
003 {{lightboxObject.text}}
004
12 Simplify the HTML
We can simplify our HTML by passing $scope.lightboxObject to the
directive attribute itself. Any attributes set on a HTML element are available
within a directive but this will keep our markup a bit tidier.
001 //myApp.html
002
003 //directives/uiDirectives.js
004 scope: {
005 content: “=myLightbox”
006 }
13 Separate the directive template
You may find it gets difficult to read and manage the template property
as a string if it gets larger. Alternatively a templateUrl property can be set that
references a path to a HTML file that holds this structure. Separate the lightbox
template HTML into a file and reference it from a templates folder as shown.
001 //directives/templates/lightbox.html
002
003
004 close
005
006
007 //directives/uiDirectives.js
008 templateUrl: “scripts/directives/templates/lightbox.
html”
14 Add an accordion directive
Now we have our lightbox directive all working we can start the
accordion component. This will require two nested directives: myAccordion and
myItem. Firstly create the myAccordion directive with transclude set to true and
a very simple template.
001 .directive(‘myAccordion’, function () {
002 “use strict”
003 return {
004 restrict: ‘AEC’,
005 transclude: true,
006 template: “”
007 }
008 })
15 Add a controller
This directive will need some functionality defined within it so we need to
create a controller inside the directive itself. Inside this controller create an empty
array called items and an addItem function to push items to this array. We will
use these shortly.
001 controller: function($scope, $element){
002 this.items = [];
003 this.addItem = function (item) {
004 this.items.push(item);
005 };
006 }
16 Create the item directive
Now create the myItem directive with the require property set to
“^myAccordion”. This denotes that this directive can only be used as a child of
myAccordion. We will need some things to be set up when this directive is called
so add a function to the link property as shown.
001 .directive(‘myItem’, function () {
002 “use strict”
003 return {
004 restrict: ‘AEC’,
005 require: “^myAccordion”,
006 transclude: true,
007 link: function(scope, element, attrs, parentCtrl){
008 // code here will run when the directive is
called
009 },
010 template: “”
011 }
012 })
17 Add your accordion HTML
Now add some accordion items to your HTML using these two
directives. Once this is done you should see the HTML structure changed to
match the directives templates when you inspect in a browser. You can define
any desired content within the accordion items.
001
002
003 Some intro text to this accordion item
004
005 Bullet item 1
006 Bullet item 2
007 Another bullet item
008
009
010
011 A sub heading
012 Some text for the second accordion
013
014 Numbered item 1
015 Numbered item 2
016 Another numbered item
017
018
019
020 Some intro text to the last accordion item
021
022 Bullet item 1
023 Bullet item 2
024 Another bullet item
025
026
027