There is a block of text containing newline separators and URLs:
In the first row\n you can Find me at http://www.example.com and also\n at http://stackoverflow.comThe goal is to update the values in ng-repeat after clicking the copy button.
This is the HTML structure:
<div ng-controller="myCntrl">
<textarea ng-model="copy_note_value"></textarea>
<button data-ng-click="copy()">copy</button>
<div>
<p ng-repeat="row in note_value.split('\n') track by $index"
wm-urlify="row"
style="display: inline-block;"
>
</p>
</div>
</div>
Controller:
app.controller('myCntrl', function ($scope) {
$scope.note_value = "first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com";
$scope.copy_note_value = angular.copy($scope.note_value);
$scope.copy = function(){
$scope.note_value = angular.copy($scope.copy_note_value);
}
});
There is a directive that should take text and return it as urlified text:
app.directive('wmUrlify', ['$parse', function ($parse) {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
function urlify(text) {
var urlRegex = /(https?:\/\/[^\s]+)/g;
return text.replace(urlRegex, function (url) {
return '<a href="' + url + '" target="_blank">' + url + '</a>';
})
}
var text = $parse(attrs.wmUrlify)(scope);
var html = urlify(text);
element[0].inneHtml(html)
}
};
}]);
Here is the flow: The user changes the text in the textarea and clicks on the copy button. The expectation is to see the change reflected in the ng-repeat.
It seems to work only when a new line is added without changing the content.
What could be the issue here? Check out this Fiddle for reference.