Warum entfernt angular $ scope den alten Wert nicht?

Question

Ich habe folgende Controller

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){ 

       $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 highlight 
       $timeout(function() { 
        $('#article').highlight(_highlights, { element: 'em', className: 'highlighted' }); 
       }, 200); 
      } 
     ); 
    } 

und die folgende Ansicht

<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> 

Wenn ich eine URL in das Textfeld am Anfang geben und klicken Fasse es wie erwartet funktioniert. Aber wenn ich den Wert im Textfeld ändere und erneut auf die Schaltfläche klicke, wird jedes Ding korrekt mit den neuen Werten aktualisiert, aber der $scope._article erhält den neuen Wert und entfernt nicht den alten Wert. Es zeigt sowohl den neuen als auch den alten Wert an, der zuvor vorhanden war.

Warum passiert das?

EDIT # 1: Ich habe mehr Code, den ich hatte. Ich fand, dass, wenn ich den $timeout(function(){...}) Teil entferne, es wie erwartet arbeitet. So, jetzt ist die Frage, warum ist $scope._article den alten Wert beibehalten und den neuen Wert vorläufig?

EDIT # 2: Ich habe festgestellt, dass $timeout(...) nicht das Problem ist. Wenn ich

$timeout(function() { 
    $('#article').highlight(_highlights, { element: 'em', className: 'highlighted' }); 
}, 200); 

zu

$('#article').highlight(_highlights, { element: 'em', className: 'highlighted' }); 

ändern verhält es sich immer noch die gleiche Art und Weise. Jetzt nehme ich an, dass es daran liegt, dass ich den $ scope._article zu etwas anderem mache? Was passiert ist, dass ich den Wert $scope._article anzeigen und dann ändern, was angezeigt wird, um die Highlights <em class='highlighed'> ... </em> zu enthalten, was auch immer ich hervorheben möchte.

EDIT # 3: Ich habe versucht, das hinzugefügte HTML zu entfernen, bevor Sie die Anfrage stellen, um neue Daten zu bekommen, aber das funktioniert auch nicht. Hier ist der Code, den ich ausprobiert habe.

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(){ 
     //Remove added html before making call to get new data 
     $('.highlighted').contents().unwrap(); 

     Article.getArticleInfo($scope.url, "").then(
      function(data){ ... } 
     ); 

Answer 1

Jquery in Winkelsteuerungen = Kopfschmerzen.

Das Problem ist wahrscheinlich für Sie da

$timeout(function() { 
     $('#article').highlight(_highlights, { element: 'em', className: }, 200); 

#article.html() hier geht seltsame Ausgang zu geben, weil Winkel seine eigene Sync-System hat und die jQuery-Bibliothek Sie verwenden hat es ist eigene Art und Weise der Arbeit mit das DOM. Werfen Sie auf die Tatsache, dass asynchrone Javascript ist schon ein Schmerz, wenn Sie mit mehreren Dingen arbeiten.

Was wollen Sie stattdessen die HTML der Winkelumfang Variable zu setzen, bevor Sie mit ihm in Jquery arbeiten, damit Sie wissen, was die jquery mit arbeitet, das heißt:

$timeout(function() { 
     $('#article').html($scope._article); 
     $('#article').highlight(_highlights, { element: 'em', className: }, 200);