Directive
Register directive with reserved word "directive"
Simple Directive
app.directive('myDirective', function($compile) {return {restrict: 'E',link : function(scope, element, attrs, controller) {var markup = "<input type='text' ng-model='test' /> {{test}} <br/>";angular.element(element).html(markup);$compile(element.contents())(scope);}};});
Include Directive
- To add the directive Angular is Camel sensitive
- In the html include the directive in a tag
HTML
<my-directive/>
HTML
<my-directive/>
Include Directive
- The elements for a directive can be:
- E - element
- A- attribute
- C-class
- M - comments
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
template: "<input type='text' ng-model='test' /> {{test}} <br/>"
};
});
HTML
<my-directive/>
Include Directive as class
- In this way you can repeat the directive many times
app.directive('myDirective', function($compile) {
return {
restrict: 'C',
template: "<input type='text' ng-model='test' /> {{test}} <br/>"
};
});
- Add in HTML
HTML
<div class="role"></div>
Include Directive as HTML & avoiding a specific tag
app.directive('role', function(){
return {
restrict: 'E',
replace: false,
templateUrl : '/html/service/directives/case.html'
}
});
Directive with own Scope
- The scope apply only for the directive
app.directive('myDirective', function($compile) {return {restrict: 'C',templateUrl: "/js/template/directive1.js",scope: {}};});
HTML
<div class='my-directive'></div>
<div class='my-directive'></div>
<div class='my-directive'></div>
Directive with own Scope passing parameters
- Directive
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
templateUrl: "/js/template/directive1.js",
scope: {
dirAttribute: "=myAttribute"
}
};
});
- Template
<input type='text' ng-model='dirAttribute' /> {{dirAttribute}} <br/>
- HTML
<my-directive my-attribute="message" />
- Also can be use to bind
- @ (pass as a string)
- = (pass as a integer)
- &
Directive with own Scope passing FUNCTIONS (Isolate scope)
- Controller
p.directive('myDirective', function($compile) {
return {
restrict: 'E',
- Directive
- To associate function should use &
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
templateUrl: "/js/template/directive1.html",
scope: {
upvote: "&"
}
};
});
- Template
<div>
<input type='text' ng-model='dirAttribute' /> {{dirAttribute}} <br>
<div ng-click="upvote()">Isolate</div>
<br />
</div>
- HTML
<my-directive upvote="click()"/>
p.directive('myDirective', function($compile) {
return {
restrict: 'E',
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
templateUrl: "/js/template/directive1.html",
scope: {
upvote: "&"
}
};
});
- Template
<div>
<input type='text' ng-model='dirAttribute' /> {{dirAttribute}} <br>
<div ng-click="upvote()">Isolate</div>
<br />
</div>
- HTML
<my-directive upvote="click()"/>
Directive to react with changes using observe
- Directive
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<img />',
replace: true,
link: function(scope, element, attrs, controller) {
attrs.$observe('attr', function(newValue, oldValue) {
console.log(newValue);
});
}
};
});
- HTML
- When you type a new value in the input the directive will detect
<div>
<input type='text' ng-model='message' /> {{message}} <br />
</div>
<my-directive attr="{{message}}" />
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<img />',
replace: true,
link: function(scope, element, attrs, controller) {
attrs.$observe('attr', function(newValue, oldValue) {
console.log(newValue);
});
}
};
});
- HTML
- When you type a new value in the input the directive will detect
<div>
<input type='text' ng-model='message' /> {{message}} <br />
</div>
<my-directive attr="{{message}}" />
Directive with his own Controller
app.directive('showTab', function () { return { restict: 'E',replace: true,template: "<button ng-click='sayHello()'></button>",controller: function($scope { $scope.sayHello = function(){ alert('Hello'); } }; });
- HTML
<showTab/>
Directive with External Controller
app.directive('showTab', function () {
return {
restict: 'E',
replace: true,
template: "<button ng-click='sayHello()'></button>",
controller: '@',
name: 'ctrl'
}
};
});
- HTML
<showTab ctrl="MyController"/>
- Controller
.app.controller('MyController', .....
- Controller
.app.controller('MyController', .....Associate directives inside other directives
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
template: "<button ng-click='message()'>Adding a message </button>",
controller: function($scope){
var array = ['m1'];
$scope.message = function(){
alert(array.join() );
}
this.addingMessage = function(newMessage){
array.push(newMessage);
}
}
};
}).directive('extraMessage', function() {
return{
restrict: 'A',
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m2');
}
}).directive('extraMessage2', function() {
return{
restrict: 'A',
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m3');
}
}
});
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
template: "<button ng-click='message()'>Adding a message </button>",
controller: function($scope){
var array = ['m1'];
$scope.message = function(){
alert(array.join() );
}
this.addingMessage = function(newMessage){
array.push(newMessage);
}
}
};
}).directive('extraMessage', function() {
return{
restrict: 'A',
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m2');
}
}).directive('extraMessage2', function() {
return{
restrict: 'A',
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m3');
}
}
});
- HTML
<my-directive extra-message />
Associate directives inside other directives with priority
- Use priority to specify the order
- Use terminal to avoid other directives with lower priority
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
priority: 1,
templateUrl: "/js/template/directive1.html",
controller: function($scope){
var array = ['m1'];
$scope.message = function(){
alert(array.join() );
}
this.addingMessage = function(newMessage){
array.push(newMessage);
}
}
};
}).directive('extraMessage', function() {
return{
restrict: 'A',
priority: 1,
terminal: false,
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m2');
}
}
}).directive('extraMessage2', function() {
return{
restrict: 'A',
priority: 2,
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m3');
}
}
});
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
priority: 1,
templateUrl: "/js/template/directive1.html",
controller: function($scope){
var array = ['m1'];
$scope.message = function(){
alert(array.join() );
}
this.addingMessage = function(newMessage){
array.push(newMessage);
}
}
};
}).directive('extraMessage', function() {
return{
restrict: 'A',
priority: 1,
terminal: false,
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m2');
}
}
}).directive('extraMessage2', function() {
return{
restrict: 'A',
priority: 2,
require: 'myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m3');
}
}
});
- HTML
<my-directive extra-message2 extra-message />
Nesting Directives
- Add ^ to consider the nested directive
- Add transclude in the main directive
transclude: true,
- In the template add ng-transclude inside a <div>
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: "/js/template/directive1.html",
controller: function($scope){
var array = ['m1'];
$scope.message = function(){
alert(array.join() );
}
this.addingMessage = function(newMessage){
array.push(newMessage);
}
}
};
}).directive('extraMessage', function() {
return{
restrict: 'A',
require: '^myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m2');
}
}
}).directive('extraMessage2', function() {
return{
restrict: 'A',
require: '^myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m3');
}
}
});
app.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: "/js/template/directive1.html",
controller: function($scope){
var array = ['m1'];
$scope.message = function(){
alert(array.join() );
}
this.addingMessage = function(newMessage){
array.push(newMessage);
}
}
};
}).directive('extraMessage', function() {
return{
restrict: 'A',
require: '^myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m2');
}
}
}).directive('extraMessage2', function() {
return{
restrict: 'A',
require: '^myDirective',
link: function(scope, element, attrs, controller){
controller.addingMessage('m3');
}
}
});
- HTML
<my-directive>
<div extra-message extra-message2 />
</my-directive>
- Template
<div>
<button ng-click='message()'>Adding a message </button>
<div ng-transclude></div>
</div>
Transclude
This directive add external content to the Directive
app.directive('collapse', function() {
return {
restrict: 'E',
replace: true,
templateUrl: "/js/template/directive2.html",
transclude: true,
scope:{
message: '@'
}
};
});
app.directive('collapse', function() {
return {
restrict: 'E',
replace: true,
templateUrl: "/js/template/directive2.html",
transclude: true,
scope:{
message: '@'
}
};
});
- HTML
<collapse message="{{message}}">
<p> including external message</p>
</collapse>
- Template
<div>
<h3>{{message}}</h3>
<div ng-transclude></div>
</div>
Directive using compile
This example is an input that accept a text to be repeated 5 times inside in a directive
- HTML
<div repeat-x="5">{{num}}</div>
- Returning a scope
app.directive('repeatX', function($compile) {
return {
link: function(scope, element, attributes, controller){
for(var i=1; i< Number(attributes.repeatX); i++){
element.after($compile(element.clone().attr('repeat-X', 0)) (scope));
}
}
};
});
- Efficient way
- In this case the scope is individual
app.directive('repeatX', function($compile) {
return {
compile: function( element, attributes){
for(var i=1; i< Number(attributes.repeatX); i++){
element.after(element.clone().attr('repeat-X', 0));
}
}
};
});
- Returning a link function
app.directive('repeatX', function($compile) {
return {
compile : function(element, attributes) {
for (var i = 1; i < Number(attributes.repeatX); i++) {
element.after(element.clone().attr('repeat-X', 0));
}
return function(scope, element, attributes, controller) {
attributes.$observe('text', function(newValue) {
if (newValue === 'change') {
element.css('color', 'red');
}
})
}
}
};
});
- HTML
<input type="text" ng-model="num">
<div repeat-x="5" text='{{num}}'>{{num}}</div>
AngularJS & JQuery
- Add Jquery in the easiest way
- Add the event to the element
<input id="event" type="text">
- HTML
<script type="text/javascript">$('#event').datepicker();</script>
Directive executing JQuery
app.directive('datePicker', function($compile) {
return {restrict: 'A',link: function(scope, element){element.datepicker();}};});
- HTML
<div>
<input id="event" date-picker type="text">
</div>
app.directive('showTab', function () {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
jQuery(element).tab('show');
});
}
};
});
<a show-tab href="#tab_1">
Tab 1
</a>
Comentarios
Publicar un comentario