Come può una funzione compile() direttiva angolare accedere a un ambito isolato?

Ho la seguente direttiva:Come può una funzione compile() direttiva angolare accedere a un ambito isolato?

angular.module("example_module", []) 
.directive("mydirective", function() { 
    return { 
    scope: { data: "@mydirective" } 
    compile: function(element) { 
     element.html('{{example}}'); 
     return function($scope) { 
     $scope.example = $scope.data + "!"; 
     }; 
    } 
    }; 
});

e il seguente codice HTML:

<!DOCTYPE html> 
<html ng-app="example_module"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Example title</title> 
    <script src="lib/angular/angular.min.js"></script> 
    <script src="js/example.js"></script> 
    </head> 
    <body> 
    <div mydirective="Hello world"></div> 
    </body> 
</html>

mi aspetterei la direttiva per compilare a Hello world!, ma si compila una stringa vuota invece. scope crea un ambito isolato che sembra impossibile da raggiungere per {{example}}.

Mi piacerebbe sapere come il nuovo codice HTML creato da compile() può accedere alla funzione di collegamento $scope.

fonte

2015-02-25 ehmicky

Questo non funziona perché {{}} esempio è in corso di valutazione contro la portata genitore, che ha un senso, dal momento che si sono essenzialmente cambiando l'elemento prima della compilazione a:

<div>{{example}}<div>

È possibile verificare sostituendo '$ scope.example =' con '$ scope. $ parent.example =' (solo a scopo dimostrativo - non è una buona pratica usare $ parent).

Quello che stai davvero cercando di fare è qualcosa di simile alla transizione, ma ci sono modi molto più semplici per farlo. Per esempio:

angular.module("example_module", []) 
.directive("mydirective", function() { 
    return { 
    restrict: 'A', 
    scope: { data: "@mydirective" }, 
    template: '{{example}}', 
    compile: function(element) { 
     return function($scope) { 
     console.log($scope.data); 
     $scope.example = $scope.data + "!"; 
     console.log($scope.example); 
     }; 
    } 
    }; 
});

Quando si utilizza un modello, esso sostituisce il contenuto dell'elemento della direttiva viene applicata a (a meno che non si utilizza sostituire: vero, nel qual caso si sostituisce l'intero elemento), e il contenuto di il modello viene valutato rispetto all'ambito della direttiva.

Si potrebbe fare ciò che si sta tentando di fare usando il parametro transclude passato a compilare (see the docs), ma questo è stato deprecato quindi non consiglierei di scendere su quella strada.

Here's a Plunk dove puoi giocare con alcune varianti.

fonte

2015-02-25 20:05:46

Come può una funzione compile() direttiva angolare accedere a un ambito isolato?

risposta

Problemi correlati