Angular JS の補間の概念を理解しようとしており、このコードを作成しました。入力ボックスにテキストを入力しようとしていますが、テキストエリアタグのテンプレートに基づいて、変数を置き換え、プレビューテキストフィールドで最終メッセージを動的に更新する必要があります。これを達成する方法。
<!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>