ng-book4: Introduction to Directives
Directives: Custom HTML Elements and Attributes
Directives are Angular's method of creating new HTML elements that have their own custom functionality.
As we can see, directives can be combined with other directives and attributes; this combination is called composition.
Our First Directive
<my-directive></my-directive>
When Angular compiles our HTML, it will invoke this directive.Invoking a directive means to run the associated JavaScript that sits behind our directive, which we define using a directive definition:
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function() {
return {
restrict: 'E',
template: '<a href="http://google.com">Click me to go to Google</a>'
}
});
We can see the source code like that:
With the .directive() method, provided by the Angular module API, we can register new directives by providing a name as a string and function. The name of the directive should always be pascalCased, and the function we provide should return an object.
The restrict could be E(element), A(attribute), C(class), or M(comment)
we can add an argument: (replace: true), it could use <a></a> to replace the <my-directive></my-directive>
Passing Data into a Directive
we could find that in our template we are hard coding the URL and the text of our link, so could we write the code like that:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google">
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'
}
});
</script>
</body>
</html>
Of course it can't work......
we should create a new scope to link the attribute(myUrl) from template to view, so we should use the keyword: @
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div my-directive
my-new-url="http://google.com"
my-new-link-text="Click me to go to Google">
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '@myNewUrl',
myLinkText: '@myNewLinkText'
},
template: '<a href="{{ myUrl }}">{{ myLinkText }}</a>'
}
});
</script>
</body>
</html>
the output is:
We could write code like follow, and it work well:
<input type="text" ng-model="myUrl" />
<div my-directive
my-new-url="{{ myUrl }}"
my-new-link-text="Click me to go to Google">
</div>
But if we move our text field inside the scope of our directive and try to make a binding in the other direction, it doesn't work:
template: '<div>\
<input type="text" ng-model="myUrl" />\
<a href="{{ myUrl }}">{{ myLinkText }}</a>\
</div>'
It will be confuse, in <input> muUrl, it link the my-new-url or the scope myUrl in the directive. So book say it doesn't work, but it confuse me too, because it work in my computer.
So writing in template or our of directive have the same result.