<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]" >
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
template : "<h1>Made by My directive!</h1>"
};
});
</script>
<my-directive></my-directive>
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul>
</body>
</html>
AngularJS has a set of built-in directives which offers functionality to your applications.
AngularJS also lets you define your own directives.
The ng-app directive initializes an AngularJS application and tells AngularJS that the <div> element is the "owner" of the AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds the value of application data to value of HTML controls (input, select, textarea)
You can invoke a directive by using:
Element name
Attribute
Class
Comment
-------------------------------------------
This is by using Element name
-------------------------------------------
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both Element names and attribute names can invoke the directive.
output:
*******
Made by My directive!
Looping with objects:
Jani, Norway
Hege, Sweden
Kai, Denmark
AngularJS also lets you define your own directives.
The ng-app directive initializes an AngularJS application and tells AngularJS that the <div> element is the "owner" of the AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds the value of application data to value of HTML controls (input, select, textarea)
You can invoke a directive by using:
Element name
Attribute
Class
Comment
-------------------------------------------
This is by using Element name
-------------------------------------------
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both Element names and attribute names can invoke the directive.
output:
*******
Made by My directive!
Looping with objects:
Jani, Norway
Hege, Sweden
Kai, Denmark
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.