AngularJS Direcitve - communication function not firing
What I'm trying to achieve: wrapping cordova sibling handlers inside an angular directive
I would like to implement handlers for native Cordova events using the directive wrapper (to listen for the body load event).
I have the following directive template:
angular.module('vitaApp')
.directive('cordovaNative', function () {
return {
restrict: 'A',
compile: function (element, attrs, transcludeFn) {
alert('compile fired');
element.bind('load', function(){
alert('load occured');
});
},
link: function postLink(scope, element, attrs) {
alert('link fired');
element.bind('load', function(){
alert('load occured');
});
}
};
});
which is created like this:
<body ng-app="vitaApp" ng-controller="metaCtrl" ng-swipe-right="showMenu()" ng-swipe-left="hideMenu()" cordova-native>
Compile function for cord directive but link function doesn't work.
Could this have something to do with ng-swipe directives (eg '{terminal: true}')?
Note. I am not trying to use compile
and link
together, I am trying to demonstrate that none of them works for the purpose of subscribing to an event load
separately.
source to share
You cannot have both a compile function and a reference in a directive. If you are using compilation, you must return a function that is itself a link function. So the above code would look like this:
compile: function (elem, attrs, transcludeFn) {
alert('compile fired');
return function(scope, element, attrs) {
alert('link fired');
element.on('load', function(){
alert('load occured');
});
}
},
Refresh . Since the directive link function runs after the element is loaded (mostly) adding element load
an event handler inside the directory link function may not be necessary.
source to share
In Angular Docs:
link
This property is used only if the compile property is not defined.
Since you have the compile function installed, the link function is not needed. There is more information on this here.
source to share
You should only use the link function if the compilation function is not defined. So in your case, since the compilation function is defined, you need to return a postLink function or an object with preLink and postLink functions.
.directive('cordovaNative', function () {
return {
restrict: 'A',
compile: function (elem, attrs, transcludeFn) {
return {
pre: function preLink() {
alert('Pre link');
},
post: function postLink(scope, element, attrs) {
alert('link fired');
element.bind('load', function(){
alert('load occured');
});
}
}
}
};
});
Or, if you don't need the preLink function:
.directive('cordovaNative', function () {
return {
restrict: 'A',
compile: function (elem, attrs, transcludeFn) {
return function postLink(scope, element, attrs) {
alert('link fired');
element.bind('load', function(){
alert('load occured');
});
}
}
};
});
source to share