Commonly Used AngularJS Directives

Below are some commonly used directives for AngularJS.

ng-app

<html ng-app="MyApp">
</html>

ng-controller

<body ng-controller="MainCtrl">
</body>
angular.module('MyApp', [
])
.controller('MainCtrl', function($scope){
});

ng-click

<button type="button" ng-click="setEditedFoo(foo); startEditing();" class="btn btn-link">
   <span class="glyphicon glyphicon-pencil"></span>
</button>

ng-repeat

<li ng-repeat="category in categories">
   <a href="#">{{category.name}}</a>
</li>

ng-show

  • ng-show docs
  • Example below. If "shouldShowEditing()" returns true then the div is displayed.
<div ng-show="shouldShowEditing()">
</div>

ng-submit

  • ng-submit docs
  • calls "createFoo()" method when the form is submitted.
  • adding the html5 attribute "novalidate" is good practice since otherwise the users web browser will try and validate the form.
 <form class="create-form" role="form" ng-submit="createFoo(newFoo)" novalidate></form>

ng-model

<div class="form-group">
  <label for="newFooName">Foo Name</label>
  <input type="text" class="form-control" id="newFooName" ng-model="newFoo.name" placeholder="Enter name">
</div>