Übergabe der Variablen an die Richtlinienvorlage, ohne einen neuen Bereich zu erstellen

Question

Gibt es eine Möglichkeit, Variablen mithilfe von Attributen an eine Anweisung zu übergeben, ohne einen neuen Bereich zu erstellen?

HTML

<div ng-click='back()' button='go back'></div> 

JS

.directive('button', function() { 
    return { 
     scope: { 
      button: '@' 
     }, 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true 
    } 
}) 

Das Problem ist, dass die ng-click='back()' bezieht sich nun auf die Richtlinie Anwendungsbereich. Ich kann immer noch tun ng-click='$parent.back()', aber es ist nicht das, was ich will.

Answer 1

Standardmäßig erstellen Richtlinien keinen neuen Bereich. Wenn Sie, dass explizit machen möchten, fügen Sie scope: false zu Ihrer Richtlinie:

<div ng-click='back()' button='go back!'></div> 

angular.module('myApp').directive("button", function() { 
    return { 
     scope: false, // this is the default, so you could remove this line 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true, 
     link: function (scope, element, attrs) { 
      scope.button = attrs.button; 
     } 
    }; 
}); 

fiddle

Da eine neue Eigenschaft, button wird auf den Rahmen geschaffen werden, sollten Sie in der Regel erstellen new kind scope mit scope: true als @ ardentum-c hat in seiner Antwort. Der neue Bereich wird prototypially inherit aus dem übergeordneten Bereich, weshalb Sie $parent.back() in Ihrem HTML nicht einfügen müssen.

Ein weiterer Leckerbissen zu erwähnen: Obwohl wir replace: true verwenden, klicken Sie auf das Element immer noch ruft back(). Das funktioniert, weil "der Ersetzungsprozess alle Attribute/Klassen vom alten Element zum neuen migriert". - directive doc
So ng-click='back()' button='go back!' werden auf die erste div in der Vorlage der Richtlinie migriert.

Answer 2

Ich denke, Sie sollten in diesem Fall kompilieren Funktion verwenden.

angular.module('myApp').directive("button", function() { 
    return { 
     template: "<div><div another-directive></div>{{button}}</div>", 
     replace: true, 
     scope: true, 
     compile: function (tElement, tAttrs) { 
      // this is link function 
      return function (scope) { 
       scope.button = tAttrs.button; 
      };    
     } 
    }; 
}); 

Hier ist jsfiddle example.