AngularJS Commonly Used Directives
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
- ng-click docs
- Short sample:
<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
- Binds a model to form controls
- ng-model docs
<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>