javascript - 如何在 AngularJS 的 HTML 中保留复杂的表达式？

Question

我正在开发一个项目，用户将填写一些 HTML <input>位于 <form>为了在表单下方生成一些预览输出。这是一个简化的示例:

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

它的工作原理是一样的，但我担心这不是最有效的解决方案，在这种情况下我不想养成它的习惯。我的理解是$watch es 通常成本较高，应谨慎使用。

这引出了我的问题:

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

感谢您的反馈!

Answer 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 就会自动计算表达式，并相应地显示或隐藏对话框。

希望这有帮助!