Question

考虑以下代码 - 它使用ng-bind在元素级别定义的表达式中打印2个模型。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example16-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular-sanitize.js"></script>
  <script src="script.js"></script>



</head>
<body ng-app="ngBindHtmlExample">
    <div ng-controller="ngBindHtmlCtrl">
    <input type="text" ng-model='asd'/>
    <input type="text" ng-model='asdasd'/><br>
    <span ng-bind='asd +" "+ asdasd'> </span>
   <p ng-bind-html="myHTML"></p>
  </div>
</body>
</html>

现在考虑使用ng-template这个代码完全相同，但只在表达式中使用{{}}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example15-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"></script>



</head>
<body ng-app="">
    <script>
    function Ctrl($scope) {
      $scope.salutation = 'Hello';
      $scope.name = 'World';
    }
  </script>
  <div ng-controller="Ctrl">
   Salutation: <input type="text" ng-model="salutation"><br>
   Name: <input type="text" ng-model="name"><br>
   <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
  </div>
</body>
</html>

针对其案例的2条指令和最佳做法的主要目的是什么？

Answer 1

两者之间的差异已被巧妙地讨论here。

简而言之，您不能使用ng-bind将多个值绑定到单个html元素。但是你可以使用ng-bind-template来做到这一点。当然，你可以像在问题中那样使ng-bind像ng-bind-template一样工作。主要区别在于执行多个表达式。 ng-bind也更快，因为很少需要使用多个表达式，所以最好使用ng-bind。

ng-bind和ng-template之间的功能区别是什么？

1 个答案: