Angular: ng-show和函数

Question

假设你有一个模板，比如

<a ng-show=function()>a link</a>

我的问题是:函数什么时候运行？我如何告诉angular是时候重新运行函数了？

Answer 1

好的，ng-show接受一个布尔值，所以使用它的最佳选择是在设置ng-show的逻辑中调用您的函数。

​

$scope.show = false;

$scope.showSomething = function(myCondition){
    if(myCondition){
        myFunction();
        $scope.show = true;
    }
};

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

​

Answer 2

ng-show中的任何表达式都会在每个摘要周期中求值，因此该函数也会在每个摘要周期中运行。因此，对函数返回值的任何更改都将反映在视图中。如果您的函数对应用程序状态进行了任何更改，从而触发了一个新的摘要周期，那么您可能会遇到无限摘要循环(这不是很好)。

因此，在像ng-show这样的指令中使用函数时要小心。如果函数是纯函数(它没有任何副作用)，那么使用它应该是安全的。

Here's a plunker that shows the function being called on every digest. (注意:在柱塞器示例中，单击按钮实际上会触发两个摘要周期，因为单击事件会触发一个摘要周期，而切换$scope变量则会触发另一个摘要周期。)

Answer 3

ng-show="booleanVar"接受条件或布尔值。您可以更改条件表达式的值，以在运行时隐藏和显示值。

但是如果你想在ng-show被触发时调用一些函数，那么你可以在你的模型中使用$watch。

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

请参阅详细信息here