触发ng-show时调用函数？

Question

我想展示一个带有ng-show显示内容的灯箱,但我不知道如何触发灯箱JS.我正在寻找类似的东西

ng-on-show="showLightbox()"

Answer 1

我认为,观看你的模型会更好,因为ng-show受到限制.

这是一个例子:

<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!');
        }
    });
});

并且小提琴

Answer 2

嗯,ng-show采用布尔值,因此使用它的最佳选择是在设置ng-show的逻辑中的某处调用showLightbox函数.

$scope.reasonToShow = false;

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

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

如果需要,你可以用$ watch做类似的事情.

Answer 3

怎样一个更简单的方法？

假设你有一个像这样的元素:

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

如果在displayMyDiv之后使用AND运算符并在其中放置回调,则只有在第一个值为TRUE(逻辑AND运算符的工作方式)时才会执行回调.所以这就是我尝试使用angular 1.15.10并且它的工作原理:

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

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

当且仅当someBooleanValue为true时,还将评估$ scope.showLightbox().所以你必须让$ scope.showLightbox()返回TRUE,否则你的div将不可见.

这种方式不仅更简单,它还将观察器实现处理为angular(更少的代码来维护),并且仅当someBooleanValue更改为TRUE时才会评估回调返回.