AngularJS — Directives

Built-in Directives

Directive	Description
ng-app	Root element
ng-controller	Controller
ng-model	Two-way binding
ng-repeat	Loop through items
ng-show/ng-hide	Show/hide elements
ng-if	Add/remove from DOM
ng-click	Click handler
ng-class	Add/remove classes
ng-style	Inline styles

ng-repeat

<ul>
  <li ng-repeat="item in items">{{item.name}}</li>
</ul>

<!-- With index -->
<li ng-repeat="item in items track by $index">
  {{$index + 1}}. {{item.name}}
</li>

ng-show and ng-hide

<div ng-show="isVisible">Visible when true</div>
<div ng-hide="isVisible">Hidden when true</div>

ng-if

<div ng-if="isLoggedIn">Welcome back!</div>
<div ng-if="!isLoggedIn">Please log in</div>

ng-class

<div ng-class="{active: isActive, highlight: isHighlighted}">
  Content
</div>

ng-click

<button ng-click="count = count + 1">Click me</button>
<p>Count: {{count}}</p>

Custom Directive

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<div>{{text}}</div>',
    scope: {
      text: '@'
    }
  };
});

Mini Practice

1. Use ng-repeat
2. Show/hide elements
3. Apply conditional classes
4. Create a custom directive

Up Next

Continue with Events — AngularJS events.