bezahlt von Native-Events und AngularJS
Ich hatte zwar schon mal eine Variante dieser AngularJS Directive gepostet, aber das hier ist die verbesserte Version und sie funktioniert sehr erfolgreich im http://www.schoo-toi.net Projekt.
Anstelel von ng-change="reload()" ( das auf $scope.reload() geht) kann man nge-event="change:reload" schreiben und es geht auch $scope.reload(event) und gibt das native JavaScript Event an die Methode weiter. Um mehrere Event-Listener zu definieren kann man diese mit ; trennen. nge-event="click:open;change:reload".
var nativeEvent=function(){
return {
link:function($scope,el,attrs){
var value=attrs.ngeEvent;
console.log("init nge-event: "+value);
if(el){
var parts=value.split(/[,;]/);
for(var i=0;i<parts.length;i++){
if(parts.length>0){
var func=function(controller,method){
return function(event){
console.log("call method: "+method);
$scope[method](event);
};
};
var subparts=parts.split(/:/);
if(subparts.length==2){
var m=subparts[1].replace(/\(event \)/,"");
m=subparts[1].replace(/\(\)/,"");
var ang_element = angular.element(el);
var raw_element = ang_element[0];
raw_element.addEventListener(subparts[0],func($scope,m),false);
}
}
}
}
else{
console.log("el is null");
}
}
};
};
angular.module('xxx.directives', []).directive("ngeEvent",nativeEvent);
angular.module("xxx",["xxx.directives"]);
xxx ist hier natürlich nur ein Platzhalter.
Anstelel von ng-change="reload()" ( das auf $scope.reload() geht) kann man nge-event="change:reload" schreiben und es geht auch $scope.reload(event) und gibt das native JavaScript Event an die Methode weiter. Um mehrere Event-Listener zu definieren kann man diese mit ; trennen. nge-event="click:open;change:reload".
var nativeEvent=function(){
return {
link:function($scope,el,attrs){
var value=attrs.ngeEvent;
console.log("init nge-event: "+value);
if(el){
var parts=value.split(/[,;]/);
for(var i=0;i<parts.length;i++){
if(parts.length>0){
var func=function(controller,method){
return function(event){
console.log("call method: "+method);
$scope[method](event);
};
};
var subparts=parts.split(/:/);
if(subparts.length==2){
var m=subparts[1].replace(/\(event \)/,"");
m=subparts[1].replace(/\(\)/,"");
var ang_element = angular.element(el);
var raw_element = ang_element[0];
raw_element.addEventListener(subparts[0],func($scope,m),false);
}
}
}
}
else{
console.log("el is null");
}
}
};
};
angular.module('xxx.directives', []).directive("ngeEvent",nativeEvent);
angular.module("xxx",["xxx.directives"]);
xxx ist hier natürlich nur ein Platzhalter.
| User | annonyme | 2015-07-02 21:32 |
Not able to write comment
Comments are disabled for this blog-entry.