在 AngularJS 中使用 ng-bind 和 {{}} 语法的比较-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，我们经常需要在 HTML 模板中动态显示数据。而 ng-bind 和 {{}} 是两种常用的方式，本文将对它们进行比较分析，帮助大家更好的使用它们。

ng-bind

ng-bind 是 AngularJS 提供的一个指令，可以将表达式的结果绑定为一个 DOM 元素的 innerText。它的语法如下：

<div ng-bind="bindingExpression"></div>

其中 bindingExpression 是一个 AngularJS 表达式，它会被计算为一个字符串，并将结果绑定到 div 元素的 innerText 中。

ng-bind 的优点在于可以避免闪烁效果（flicker），因为表达式的值在计算完成后才会显示在 DOM 中，而不是先显示一个空值，然后再更新为表达式的值。此外，ng-bind 可以防止 XSS 攻击，因为它会自动将表达式的值进行安全过滤。

下面是一个示例，使用 ng-bind 显示当前时间：

<div ng-bind="currentTime"></div>

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.currentTime = new Date().toLocaleTimeString();
});

{{}}

{{}} 是 AngularJS 提供的另一种语法，可以将表达式的结果插入到 HTML 模板中。它的语法如下：

<div>{{expression}}</div>

其中 expression 是一个 AngularJS 表达式，它会被计算为一个字符串，并将结果插入到 div 元素中。

{{}} 的优点在于语法简单，易于理解和使用。此外，它也支持过滤器（filters），可以对表达式的结果进行处理。

下面是一个示例，使用 {{}} 显示当前时间：

<div>{{currentTime}}</div>

angular.module('myApp', []).controller('myCtrl', function($scope, $interval) {
  $interval(function() {
    $scope.currentTime = new Date().toLocaleTimeString();
  }, 1000);
});

比较

ng-bind 和 {{}} 各有优点和缺点，我们可以根据具体的需求来选择适合的方式。

ng-bind 更加安全和稳定，可以避免闪烁效果和 XSS 攻击。但是它只能绑定 innerText，无法在 HTML 模板中进行更复杂的操作。
{{}} 更加灵活，可以在 HTML 模板中直接插入表达式的结果，支持过滤器。但是它可能会产生闪烁效果，导致页面性能下降。

需要注意的是，ng-bind 和 {{}} 的实现原理是不同的。ng-bind 是通过 JavaScript 编程实现的，而{{}}是在 AngularJS 的编译器中实现的。因此，在大型应用中，ng-bind 的性能可能会更优秀一些。

总结

在 AngularJS 中使用 ng-bind 和 {{}} 语法都可以动态显示数据，在实际开发中需要根据具体的需求来选择适合的方式。如果需要避免闪烁效果和 XSS 攻击，可以选择 ng-bind；如果需要更灵活的表达式处理和过滤器，可以选择{{}}。需要注意的是，在大型应用中，ng-bind 的性能可能会更好一些。

示例代码：https://codepen.io/anon/pen/MZOdZO

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64d03792b5eee0b525730865