2016-10-18 1 views
2

ich so etwas wie unten in DOM haben:Angular Einmaliger binden bedingt oder unbind Zuhörer, wenn ein bestimmter Wert eingestellt ist

<div ng-if="variant" 
    ng-include="'size-picker.html'"> 
</div> 

Und in der Steuerung:

$scope.variant = false; 
// after some unknown time there may be: 
$scope.variant = true; 

wollte ich zeigen, dass div, wenn variant wahr ist. So wird

$scope.variant wird von false starten. Nach einiger Zeit kann/darf es nicht true werden. Wenn $scope.varianttrue wird, wird es niemals seinen Wert ändern. Also, was ich will, ist einmalige Bindung, die ng-if einmal $scope.varianttrue ist.

Ein Ansatz wie:

<div ng-if="::variant" 
    ng-include="'size-picker.html'"> 
</div> 

stoppt verbindlich, wenn es falsch ist.

Ich kann es erreichen, indem Sie false zu variant in der ersten Zeit zuweisen, aber es ist nicht in meinem Fall möglich.

Wie kann ich die ng-wenn die variant ist true?

Antwort

2

Sie können $watch, verwenden Sie ein binding oder ein scope

$watch gibt eine deregistration Funktion deregistrieren.

var unwatch = $scope.$watch('variant', function(newValue, oldValue) { 
    if(newValue == true) 
    { 
     unwatch(); 
    } 
}); 

Also, wenn Sie Ihre Variante wird wahr, die Uhr auf sie entfernt wird, und die Bindung wird gestoppt:

Sie können eine $watch mit der Funktion durch den $watch Aufruf zurück deregistrieren.

var app = angular.module("Demo", []); 
 

 
app.controller(
 
    "AppController", 
 
    function($scope) { 
 
    $scope.count = 0; 
 
    $scope.after_unwatch = false; 
 

 
    var unbindWatcher = $scope.$watch(
 
     "count", 
 
     function(count) { 
 
     alert("Watching click count."); 
 
     if (count >= 5) { 
 
      $scope.after_unwatch = true; 
 
      unbindWatcher(); 
 
     } 
 

 
     } 
 
    ); 
 

 

 
    
 
    $scope.incrementCount = function() { 
 
     $scope.count++; 
 
    }; 
 

 
    } 
 
);
<html> 
 
<body> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <div ng-app="Demo" ng-controller="AppController"> 
 
    <h1> 
 
     Unbinding $watch() Listeners In AngularJS 
 
    </h1> 
 

 
    <p> 
 
     <a ng-click="incrementCount()">Click it for five times, and after that watch on `count` is removed.</a> 
 
     &raquo; 
 

 
    </p> 
 

 
    <p ng-show="after_unwatch"> 
 
     <em>The watch on click is removed.</a> 
 
    </p> 
 
    </div> 
 
</body> 
 
</html>

Führen Sie diesen Code

Here is a plunker

+0

Danke. Du sagst also, eckig hört auf, diese Variable vollständig zu beobachten? Auch ist es abhängig von anderen Orten wie DOM? –

+0

Ja, sobald Sie diese Scope-Variable in die Funktion '$ watch' setzen, wird ihr Bereich basierend auf einer Bedingung entfernt. – Sravan

+0

Lassen Sie mich Ihnen ein Beispiel geben und es veröffentlichen. – Sravan

2

Die docs sagen:

Einmaliger Ausdrücke neu berechnet stoppt, sobald sie stabil sind, die das erste passiert nach verdauen, wenn der Ausdruck Ergebnis ein nicht-undefinierten Wert ist.

Sie könnten also mit einem undefinierten Wert beginnen.

+0

In meinem Fall wird es mit falschen beginnen. Es ist eine riesige Codebasis. Ich habe Grenzen, um das zu tun. –

+1

Falls Sravans Antwort für Ihren speziellen Fall nicht funktioniert, können Sie eine andere undefinierte Variable für den ngIf verwenden und dann den Zustand 'variant' überwachen und diese Variable entsprechend aktualisieren.Nicht optimal, aber mit schwierigen Einschränkungen manchmal ist das das Beste, was wir schaffen können –

+0

Das ist eine nette Art, das zu tun. –

Verwandte Themen