AngularJS Directives power the HTML

Saturday, February 7, 2015

The initial page setup, reference the scripts and add the angular directives

Create a module and controller in the script file

Create a valid directive in the most minimal way possible

Insert the directive as an attribute dash casing it

Load the page in the browser and view the div is listed there with the directive in it

Add an attribute that takes a string and will display inside the element the directive has been added to

View the text is now displayed

Transform the directive into a custom element

In directive defintion add restrict attribute to restrict the directive to an element

Up on scope there is a user object with a name property

Inside the template attribute databind the user on scope to the name property

View the result on the web page

Add in some extra data and bind in the template, HTML tags are also valid

Refresh the web page and view the result

Remove the address from the user object

View the address heading still shows in the HTML

Add ng-show directive if user has a valid address property

View the address heading has completely disappeared

Add the address back in

The address heading comes back in with the address

Add three missions to the user object

Display the three missions on the user card, using an ng-repeat

View the directive is working just the way we want it

Create a new template and paste the contents of the template property in it

Change the template property to templateurl property and specify the name of the template

View the user data card element has been left inside the document

To remove the element from the HTML set the replace property to true

To replace the directive with the content of the element a single root element is required

The custom element has now been replaced

As of angular 1.3 the replace attribute has been deprecated, back off all changes done

Add some styling to the index file

Add some bootstrap styles to the template

View the result in the browser

Add a button to king the current user

Handle the click event and set the users rank

In the template display the rank of the user

Add an ng-show to the div to only show the contents if the user has a rank property

To the button add an ng-show to hide the button if the user has a rank

Click the kingme button

View the rank shows and the button hides

Default Success Warning Important Info Inverse
B S W I ? O