Angular: Empty Fiddle
http://angularjs.org/
HTML
<!-- partials -->
<script type="text/ng-template" id="textareas.html">
<textarea ng-if="strings" ng-repeat="str in strings" ng-blur="blur( $event, $index )">{{strings[$index]}}</textarea>
</script>
<div ng-controller="MyCtrl">
Here's a few strings: <br />
<div ng-repeat="str in strings">{{strings[$index]}}</div>
Here's the strings as editable (twice so that you can see the updates from a model change): <br />
<form-textareas strings="strings"></form-textareas>
<form-textareas strings="strings"></form-textareas>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.strings = [ "foo", "bar", "cow" ];
}])
.directive('formTextareas', function() {
return {
restrict: "E",
scope: {
strings: '='
},
templateUrl: "textareas.html",
link: function( $scope ){
$scope.blur = function( $event, $index ){
$scope.strings[ $index ] = $event.currentTarget.value;
};
}
};
})
;