Интерполяция в Angular JS

Я пытаюсь понять концепции интерполяции в Angular JS, и я написал этот код. Я пытаюсь ввести текст в поле ввода и на основе шаблона в теге текстовой области, он должен заменить переменную и обновить окончательное сообщение динамически в поле previewText. Как достичь этого.Интерполяция в 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>

источник

2016-12-12 ang123

Просто удалить $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-12 04:58:42 Phil

Спасибо. Это сработало :) Не могли бы вы предоставить мне какие-либо предложения по материалам, где я лучше понимаю концепции Interpolate в Angular? – ang123

@ ang123 Вы, кажется, понимаете их достаточно хорошо. Все, что у вас пропало, было крючком для обновления 'previewText', когда изменилась модель' to' – Phil

Интерполяция в Angular JS

ответ

Смежные вопросы