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

Question

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

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 与表达式一起使用真的只是在幕后做同样的事情吗？

感谢任何反馈！

Answer 1

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

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

Answer 2

是的，您可以使用 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>

Angular 将在 showPreview 方法 returns 输出不同值时自动计算表达式，并相应地显示或隐藏对话框。

希望对您有所帮助！

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

How to a keep a complex expression out of my HTML in AngularJS?

html

javascript

angularjs

angularjs-directive

angularjs-scope