angularjs - how - Weird ngIf+$ compila el comportamiento
ngif angular 5 else (3)
Considera esto. ngSi quita el elemento completo y lo reemplaza con el comentario. La expresión es luego observada. Los cambios posteriores activan el elemento entre DOM y REMOVED.
Ahora el problema es que ha colocado el bloque dentro de la fase de compilación. El código para ng-if completo se reemplaza por un solo comentario.
En cuanto a la solución, puede haber muchas. Todo depende de lo que vaya bien con la estructura y las necesidades de tu aplicación.
Yo propongo dos:
1) Mueva la lógica de la fase ''compilar'' a ''enlazar''.
link: function(el){
el.removeAttr(''swipe'');
var fn = $compile(el);
return function (scope) {
fn(scope);
};
},
2) Deberá usar la transclusión.
app.directive(''swipe'', function($compile){
return {
restrict: ''A'',
compile: function(el){
el.removeAttr(''swipe'');
var fn = $compile(el);
return function (scope) {
fn(scope);
};
},
transclude: true,
template: "<div ng-transclude></div>"
}
});
Los siguientes símbolos de tu muestra pueden guiarte:
http://jsbin.com/zecujonoqi/1/edit?html,js,output
http://jsbin.com/mubodevofa/1/edit?html,js,output
Espero eso ayude.
Estoy tratando de construir una directiva que haga lo siguiente:
- agregue otra directiva al elemento (ngSwipeRight, por ejemplo)
- agregue algún comportamiento personalizado a la nueva directiva.
Un ejemplo sería: mySwipeBack que agregaría ngSwipeRight y cuando el usuario pase sobre el elemento, yo haría history.back() .
Intenté así:
.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);
};
}
}
});
Pero me encontré con un problema con el siguiente marcado:
<div ng-if=''true''>
<h1 swipe>OUTSIDE
<div ng-if="true">INSIDE</div>
</h1>
</div>
El texto "DENTRO" no se procesa. Puedes ver el comportamiento en este jsbin: http://jsbin.com/tokofevuga/edit?html,js,output
Si elimino el primer ng-if, funciona según lo previsto.
¿Alguien sabe cuál es la razón detrás de esto, y si puedo hacerlo funcionar?
¿O si alguien tiene otra idea de cómo lograr lo que describí arriba?
return function (scope) {
$compile(el)(scope);
};
Trabaja para mí ... Y el punto es que en tu código compilas el elemento inmediatamente en la compilación de directivas, mientras que aquí la función se devuelve desde la compilación, que se ejecutará alguna vez más adelante.
Como ng-if crea su propio scope , creo que compila el elemento demasiado pronto.
En el siguiente fragmento de código, moví la compile part al link y vinculé el elemento con el alcance actual de la directiva.
var app = angular.module(''jsbin'', []);
app.controller(''DemoCtrl'', function() {
});
app.directive(''swipe'', function($compile) {
return {
restrict: ''A'',
link: function($scope, el) {
el.removeAttr(''swipe'');
$compile(el)($scope);
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
</head>
<body ng-app="jsbin">
<div ng-controller="DemoCtrl">
<div ng-if=''true''>
<h1 swipe>OUTSIDE
<div ng-if="true">INSIDE</div>
</h1>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.js"></script>
</body>
</html>