1

我正在尝试理解 Angular JS 中的插值概念，并且我已经编写了这段代码。我正在尝试在输入框中输入文本，并根据文本区域标签中的模板，它应该替换变量并在 previewText 字段中动态更新最终消息。如何实现这一点。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<input ng-model="to" 
      type="email" 
      placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<pre>{{ previewText }}</pre>
</div>
</body>
<script>
angular.module('myApp', []).controller('MyController',function($scope,   $interpolate) {
  $scope.to = 'text'; //static value.Trying to make this dynamic. How     to achieve it??
 //      $scope.$watch('to',function(newValue,oldValue,scope)
  //{
    //$scope.to = $interpolate($scope.to)($scope);
  //});
  $scope.emailBody = 'Hello {{ to }},My name is Ari too!';
  // Set up a watch
  $scope.$watch('emailBody', function(body) {
    if (body) {
      var template = $interpolate(body);
      $scope.previewText = 
        template({to: $scope.to});
    }
  });
  });



 </script>
 </html>
4

2 回答 2

1

只需删除您的$scope.watch并将其替换为

$scope.update = function() {
  $scope.previewText = $interpolate($scope.emailBody)($scope);
};
$scope.update();

然后加

ng-change="update()"

对你<input>和<textarea>。

请注意，由于您已指定<input type="email">，因此to模型仅在输入值为电子邮件地址（不包括初始状态）时才有效并设置。

http://plnkr.co/edit/AOR6a7TAYhoXYSnJh2r4?p=preview

于 2016-12-12T04:58:42.587 回答
0

AngularJS 使用带有嵌入表达式的插值标记来为文本节点和属性值提供数据绑定。

插值示例如下所示：

你好{{imagename}}！
于 2018-06-20T10:21:16.107 回答