[ AngularJS ] directive : create own HTML node

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

1. Writing your own directive

Example

<body ng-app="myApp">

<w3-test-directive></w3-test-directive>

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

</body>

restrict

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
              }
};
});

Example

<div ng-controller="CtrlName">

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

<isolate-scope-with-controller/>

</div>

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.

Example

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

app.directive('w3TestDirective', function () {
return {controller: ["$scope", function($scope){
$scope.testMethod();
console.log($scope.testScope);
}],
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;
</div>

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){
event.srcElement.id
event.preventDefault();
});
elem.on('mouseenter', function(){

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

});
elem.html('whatever');
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/

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s