[ AngularJS ] directive : create own HTML node

directive : extended HTML attributes, element name, class, comment

1. Writing your own directive


<body ng-app="myApp">


var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>",
restrict: "EA"



E for Element name
A for Attribute
C for Class
M for Comment

NOTE : By default the value is EA, meaning that both Element names and attribute names can invoke the directive.

ref : http://www.w3schools.com/angular/angular_directives.asp

2. Directive with Controller

app.directive('isolateScopeWithController', function () {
return {controller: controller,
    controllerAs: 'WE',
    template: "whatever"},
    function controller($scope){
              $scope.reverseName = function(){
                  // DO something here


<div ng-controller="CtrlName">

<a ng-click="reverseName()">click me</a>



dependencies can also be injected to controller

.directive('whatever', function(){

return {controller: ['dep1', function(dep1Var){}],




3. scope

“@” ( Text binding / one-way binding : parent scope (Controller scope) -> directive scope )

“=” ( Direct model binding / two-way binding : parent scope (Controller scope) <-> directive scope )
“&” ( Behaviour binding / Method binding )

“false” ( parent scope and the directive scope is in sync )

“true” ( get a new scope : changes made in the Controller ( the parent scope ) will be reflected in the directive scope, but any changes made in the directive scope will not effects the Controller scope )

All these prefixes receives data from the attributes of the directive HTML element.


We want to bind the “test-scope” attribute.

app.directive('w3TestDirective', function () {
return {controller: ["$scope", function($scope){
scope: {
       testScope: '=',
testMethod: '&'

app.controller('MainCtrl', function(){
// declare XXXYYY datasource here
// declare whatever()
<div class="parent" ng-controller="MainCtrl">
&amp;lt;li w3-test-directive test-scope="XXXYYY" test-method="whatever()" &amp;gt;&amp;lt;/li&amp;gt;

4. bindToController:true

bind to controller, rather than bind to scope

i.e. instead of $scope.xxx, we can use this.xxx

link = create a anchor 

return {link: link}
function link(scope, elem, attrs){
    // elem means that node
elem.on('click', function(event){
elem.on('mouseenter', function(){

elem.on('mouseleave', function(){

elem.css('background-color', 'whatever');

ref : http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-6-using-controllers

, http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s