如何在 AngularJS 中将复杂的表达式排除在我的 HTML 之外？答案

【问题标题】：How to a keep a complex expression out of my HTML in AngularJS?如何在 AngularJS 中将复杂的表达式排除在我的 HTML 之外？
【发布时间】：2015-01-15 14:30:06
【问题描述】：

我正在进行一个项目，用户将在<form> 中填写一些 HTML <input>s，以便在表单下方生成一些预览输出。这是一个简化的例子：

http://plnkr.co/edit/64Okgv4Ncb5yL7jOM6Xt?p=preview

在每个字段都有值之前，我不想显示预览输出。实现这一点的一种方法（如上面 Plunker 中使用的）是通过ngShow directive：

<div class="container-fluid output" ng-show="event.name && event.date && event.category && event.location">

这不是太疯狂，但在这里我大大简化了我需要实现的实际逻辑。有多种特殊情况将决定是否显示预览。如果我坚持使用这种方法，表达式将在我的 HTML 中变成一团乱七八糟的 JavaScript 条件。

我知道的另一种方法是使用$watchCollection()（为简单起见，我将其称为$watch）。这是一个 Plunker，我在其中设置了 $watch 的等效项：

http://plnkr.co/edit/UPToOlQCZddJ2a1Ye1cq?p=preview

它的工作原理相同，但我担心这不是最有效或最有效的解决方案，在这种情况下，我不想养成它的习惯。我的理解是$watches 通常很昂贵，应该谨慎使用。

这引出了我的问题：

有没有比使用$watch 更好的方法？
如果没有，我正在使用的$watch 是否可以修改以提高性能？
我在这里使用$watch 是否过于谨慎？使用 ngShow 和表达式真的只是在幕后做同样的事情吗？

感谢您的任何反馈！

【问题讨论】：

标签： javascript html angularjs angularjs-directive angularjs-scope

【解决方案1】：

是的，您可以使用 watch，但还有另一种简单的解决方案，方法是使用范围函数，您可以在其中放置逻辑以显示预览或不显示。

$scope.event = {};

$scope.showPreview = function() {
    if (!$scope.event) {    // if none is filled
        return false;
    }

    if (!$scope.event.name || !$scope.event.date || !!$scope.event.category || !$scope.event.location) {
        return false;
    }

    if (/* your custom or special logic */) {
        // if satisfies then return true else return false
    }
    return true;
};

现在您可以简单地在 HTML 中编写如下代码：

<div class="container-fluid output" ng-show="showPreview()"></div>

只要showPreview 方法的输出返回不同的值，Angular 就会自动计算表达式，并相应地显示或隐藏对话框。

希望这会有所帮助！

【讨论】：

啊哈！这很干净，简单，并且尊重关注点分离。我知道范围函数，并且确信必须有比我的表达式方法更好的方法，但我对 AngularJS 太陌生，无法识别这种模式。不过，这是一个灯泡时刻。非常感谢您的帮助！

【解决方案2】：

ng-show 中的任何表达式都被实现为手表，因此您不会节省很多。

$watch 是昂贵的，因为它会在每次击键后执行。如果你有一百个，用户会注意到速度变慢。一个无关紧要。

【讨论】：

谢谢！知道无论如何它将成为幕后的手表，这很有帮助。感谢您的意见。