I'm trying to build a directive that would do the following:
- add another directive to the element (ngSwipeRight for example)
- add some custom behavior to the new directive.
An example would be: mySwipeBack
that would add ngSwipeRight
and when the user swipes over the element I would do history.back()
.
I tried like this:
.directive('swipe', function($compile){
return {
restrict: 'A',
compile: function(el){
// I removed all the actual logic for demo purposes
// here I would add ng-swipe-right plus a handler
el.removeAttr('swipe');
var fn = $compile(el);
return function (scope) {
fn(scope);
};
}
}
});
But I ran into an issue with the following markup:
<div ng-if='true'>
<h1 swipe>OUTSIDE
<div ng-if="true">INSIDE</div>
</h1>
</div>
The "INSIDE" text doesn't get rendered. You can see the behavior in this jsbin: http://jsbin.com/tokofevuga/edit?html,js,output
If I remove the first ng-if, it works as intended.
Does anyone know what the reason is behind this - and if I can make it work?
Or if someone has another idea of how to achieve what I described above?
ng-if
s with ang-show
works. Not sure why that happens though.compile
function of the directive: Why are you manually compileing the element? If you remove the last three lines in the compile function to only haveel.removeAttr('swipe');
it works as expected