在 AngularJS 中，我们可以使用 ng-bind 和 {{}} 来将数据绑定到 HTML 页面中。这两种方式都可以实现数据的双向绑定，但是它们的使用方式有一些不同。本文将详细介绍 ng-bind 和 {{}} 的用法和区别，并给出示例代码。
ng-bind 的使用方式
ng-bind 是 AngularJS 提供的一种指令，它可以将指定的表达式的值绑定到 HTML 元素的内容中。使用 ng-bind 的语法如下：
<div ng-bind="expression"></div>
其中，expression 是一个 AngularJS 表达式，它可以是一个变量、一个函数、一个对象等等。
例如，我们可以将一个变量绑定到 HTML 页面中：
<div ng-bind="name"></div>
这样，当 name 这个变量发生变化时，页面上绑定的内容也会随之更新。
ng-bind 还可以与过滤器一起使用，例如：
<div ng-bind="name | uppercase"></div>
这样，name 变量的值会先经过 uppercase 过滤器处理，然后再绑定到页面上。
{{}} 的使用方式
{{}} 是 AngularJS 中另一种常用的数据绑定方式，也被称为插值表达式。它可以将表达式的值插入到 HTML 元素的内容中。使用 {{}} 的语法如下：
<div>{{expression}}</div>与 ng-bind 不同的是，{{}} 中的表达式可以包含任何 JavaScript 表达式，例如：
<div>{{name + " is " + age + " years old."}}</div>这样，name 和 age 变量的值会被拼接成一个字符串，然后插入到页面上。
{{}} 还可以与过滤器一起使用，例如：
<div>{{name | uppercase}}</div>这样，name 变量的值会先经过 uppercase 过滤器处理，然后再插入到页面上。
ng-bind 和 {{}} 的区别
虽然 ng-bind 和 {{}} 都可以实现数据的双向绑定，但是它们还是有一些区别的。
首先，ng-bind 只能绑定到一个元素的内容中，而 {{}} 可以插入到任何 HTML 元素的属性中，例如：
<img src="{{imageUrl}}">其次，ng-bind 可以避免页面闪烁的问题。在页面加载时，如果使用 {{}} 绑定数据，可能会出现页面先显示 {{}}，然后再显示实际的数据的情况。而使用 ng-bind 则可以避免这个问题。
最后，ng-bind 可以提高页面的性能。当使用 {{}} 绑定大量数据时，AngularJS 需要对每个表达式进行解析和计算，这可能会影响页面的性能。而使用 ng-bind 则可以将计算的工作放到后台，从而提高页面的性能。
示例代码
下面是一个使用 ng-bind 和 {{}} 的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-bind and {{}} Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>ng-bind Demo</h1>
<div ng-bind="name"></div>
<br>
<h1>{{}} Demo</h1>
<div>{{name}}</div>
<br>
<h1>{{}} with Filter Demo</h1>
<div>{{name | uppercase}}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = 'John Doe';
});
</script>
</body>
</html>在这个示例代码中，我们定义了一个 AngularJS 应用，并在其中使用了 ng-bind 和 {{}} 两种方式来绑定数据。同时，我们还使用了一个过滤器 uppercase 来将变量的值转换为大写字母。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2b6bfa941bf713454eb3d