Question

我想展示一个内容由ng-show显示的灯箱，但我不知道如何触发灯箱JS。我正在寻找像

这样的东西

ng-on-show="showLightbox()"

Answer 1

我认为，你的模型$watch会更好，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!');
        }
    });
});

和fiddle

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时才会评估回调返回。

触发ng-show时调用函数？

3 个答案: