Eine Funktion aufrufen, wenn ng-show ausgelöst wird?

Question

Ich möchte eine Lightbox zeigen, deren Inhalt von ng-show enthüllt wird, aber ich weiß nicht, wie ich den Leuchtkasten JS auslösen soll. Ich bin auf der Suche nach so etwas wie

ng-on-show="showLightbox()" 

Answer 1

Ich denke, es wäre besser, Ihr Modell $watch, auf dem ng-Show gebunden ist.

Hier ist Beispiel:

<div ng-app="myApp" ng-controller="myCtrl" ng-init="isDisplayed = true"> 
    <div ng-show="isDisplayed">something</div> 
    <button ng-click="isDisplayed = !isDisplayed">Toggle</button> 
</div> 

var myApp = angular.module('myApp', []) 
.controller('myCtrl', function($scope, $log) { 
    $scope.$watch('isDisplayed', function(newValue, oldValue) { 
     if (newValue !== oldValue) { 
      $log.log('Changed!'); 
     } 
    }); 
}); 

und fiddle

Answer 2

Nun, ng-Show nimmt einen Booleschen Wert, so dass Ihre beste Option, um es für die Verwendung ist Ihre showLightbox Funktion irgendwo in der Logik zu nennen, die Sets ng-zeigen.

$scope.reasonToShow = false; 

$scope.showSomething = function(myCondition){ 
    if(myCondition){ 
     showLightbox(); 
     $scope.reasonToShow = true; 
    } 
}; 

<div ng-show='reasonToShow'></div> 

Sie könnten etwas Ähnliches mit einer $ Uhr tun, wenn Sie müssen.

Answer 3

was ist mit einem einfacheren Ansatz?

sagen wir, Sie ein Element wie dieses:

<div ng-show="someBooleanValue"></div> 

Wenn Sie einen AND-Operator nach displayMyDiv verwenden und einen Rückruf dort setzen, würde der Rückruf nur ausgeführt werden, wenn der erste Wert TRUE ist (das ist, wie die logischer UND-Operator funktioniert). So ist das, was ich mit Winkel 1.15.10 ausprobiert und es funktioniert:

$scope.showLightbox = function() { 
    // your logic goes here 
    return true; 
} 

<div ng-show="someBooleanValue && showLightbox()"></div> 

Wenn und nur wenn someBooleanValue wahr ist, dann $ scope.showLightbox() wird auch ausgewertet werden. Sie müssen also $ scope.showLightbox() setzen, um TRUE zurückzugeben, sonst ist Ihr div nicht sichtbar.

Dieser Weg ist nicht nur einfacher, er behandelt auch die Observer-Implementierung in eckig (weniger zu wartender Code), und die Callback-Rückgabe wird nur ausgewertet, wenn sich someBooleanValue auf TRUE ändert.