parameter - angularjs directive scope binding




Weird ngIf+$ Kompilierverhalten (2)

Bedenken Sie. ngIf entfernt das gesamte Element und ersetzt es durch den Kommentar. Der Ausdruck wird dann beobachtet. Die nachfolgenden Änderungen lösen das Element zwischen DOM und REMOVED aus.

Jetzt ist das Problem, Sie haben den Block in der Kompilierphase platziert. Der Code für ganze ng-if wird durch einen einzelnen Kommentar ersetzt.

Bezüglich der Lösung kann es viele geben. Es hängt alles davon ab, was gut mit der Struktur und den Bedürfnissen Ihrer App zusammenpasst.

Ich schlage zwei vor:

1) Verschieben Sie die Logik von "Kompilieren" in "Verknüpfen" -Phase.

link: function(el){
    el.removeAttr('swipe');
    var fn = $compile(el);
    return function (scope) {
      fn(scope);
    };
 },

2) Sie müssen die Transclusion verwenden.

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>"
 }
});

Die folgenden Gabeln Ihres Samples können Sie dabei unterstützen:

http://jsbin.com/zecujonoqi/1/edit?html,js,output

http://jsbin.com/mubodevofa/1/edit?html,js,output

Ich hoffe es hilft.

Ich versuche eine Direktive zu erstellen, die folgendes tun würde:

  • fügen Sie dem Element eine weitere Anweisung hinzu (zB ngSwipeRight)
  • Fügen Sie der neuen Anweisung ein benutzerdefiniertes Verhalten hinzu.

Ein Beispiel wäre: mySwipeBack , das ngSwipeRight hinzufügen ngSwipeRight und wenn der Benutzer über das Element streicht, würde ich history.back() .

Ich habe es so versucht:

.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);
        };
   }
 }
});

Aber ich stieß auf ein Problem mit dem folgenden Markup:

<div ng-if='true'>
  <h1 swipe>OUTSIDE
    <div ng-if="true">INSIDE</div>
  </h1>
</div>

Der Text "INSIDE" wird nicht gerendert. Sie können das Verhalten in diesem jsbin sehen: http://jsbin.com/tokofevuga/edit?html,js,output

Wenn ich das erste ng-if entferne, funktioniert es wie beabsichtigt.

Weiß jemand, was der Grund dafür ist - und ob ich es zum Laufen bringen kann?

Oder wenn jemand eine andere Idee hat, wie ich das erreichen kann, was ich oben beschrieben habe?


    return function (scope) {
      $compile(el)(scope);
    };

Arbeit für mich ... Und der Punkt ist, dass in Ihrem Code - kompilieren Sie Element sofort in der Direktiven kompilieren, während hier Funktion aus dem Kompilieren zurückgegeben wird, die irgendwann später ausgeführt wird.





angularjs-directive