In my controller, I have defined the following:
angular.module('publicApp')
.controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeout) {
$scope._url = "";
$scope._title = "";
$scope._article = "";
$scope._authors = "";
$scope._highlights = [];
$scope._docType = "";
$scope.summarizeURL = function(){
Article.getArticleInfo($scope.url, "").then(
function(data){
// Populate variables with data from API response
$scope._url = data.url;
$scope._title = data.title;
$scope._authors = data.authors.join(', ');
$scope._highlights = data.highlights;
$scope._docType = data.documentType;
if($scope._docType == 'html'){
$scope._article = data.article[0].article;
}
else{
$scope._article = data.article;
}
var _highlights = [];
$scope._highlights.forEach(function (obj) {
_highlights.push(obj.sentence);
});
// Wait for article text to render, then apply highlighting
$timeout(function () {
$('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });
}, 200);
}
);
}
The corresponding view is as follows:
<form role="form" ng-submit="summarizeURL()">
<div class="form-group">
<input id="url" ng-model="url" class="form-control" placeholder="Enter URL" required>
</div>
<button class="btn btn-success" type="submit">Summarize</button>
</form>
<div class="col-lg-8">
<h2>{{ _title }}</h2>
<p> <b>Source: </b> <a href="{{_url}}" target="_blank">{{_url}}</a></p>
<p> <b>Author: </b> {{_authors}} </p>
<p> <b>Article: </b><p id="article">{{_article}}</p></p>
</div>
After entering a new URL in the input field and clicking "Summarize", all values update correctly except for $scope._article. The old value remains displayed alongside the new one. Why is this happening?
EDIT #1: After further investigation, I discovered that removing the $timeout(function(){...}) section resolves the issue. So now the question shifts to why $scope._article retains the old value and appends the new one.
EDIT #2: Upon testing, I found that changing the code snippet within $timeout(...) does not affect the behavior. Even without the timeout, the problem persists. It seems related to altering the $scope._article contents, specifically adding highlights using
<em class='highlighted'> ... </em>EDIT #3: Attempting to remove the added HTML before fetching new data did not resolve the issue. Here's the unsuccessful approach:
angular.module('publicApp')
.controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeout) {
$scope._url = "";
$scope._title = "";
$scope._article = "";
$scope._authors = "";
$scope._highlights = [];
$scope._docType = "";
$scope.summarizeURL = function(){
//Attempt to remove added HTML before making new request
$('.highlighted').contents().unwrap();
Article.getArticleInfo($scope.url, "").then(
function(data){ ... }
);