角度$スコープが古い値を削除しないのはなぜですか？

Question

私が最初にテキストフィールドにURLを与えると期待どおりに動作します要約をクリックすると、私は、次のコントローラ

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); 
      } 
     ); 
    } 

と次のビュー

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

を持っています。しかし、テキストフィールドの値を変更してもう一度ボタンをクリックすると、新しい値ですべてが正常に更新されますが、$scope._articleは新しい値を取得し、古い値は削除されません。以前にあった新しい値と古い値の両方が表示されます。

どうしてですか？

編集＃1：私が持っていたコードを追加しました。私は、$timeout(function(){...})の部分を削除すると、期待どおりに動作することがわかりました。だから今質問は、なぜ新しい値を保持して、古い値を保持している$scope._articleですか？

EDIT＃2：私は$timeout(...)が問題ではないことを発見しました。私は

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

に

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

を変更した場合、それはまだ同じように動作します。だから私は$ scope._articleを何か他のものに変えているのでそれを仮定しています。私は$scope._articleの値を表示していて、ハイライトを含むように表示されているものを変更して、これまでに強調したいものを<em class='highlighed'> ... </em>に変更しています。

EDIT＃3：新しいデータを取得する要求を行う前に、追加されたhtmlを削除しようとしましたが、どちらも機能しません。ここで私が試したコードです。

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 =頭痛。問題はここにあなた

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

#article.html()のためにここにある可能性があり

は、角度を持っているので、それが自身の同期システムと、使用しているjQueryライブラリだ、それはでの作業の独自の方法だた、奇妙な出力を与えるために起こっていますDOM。あなたが複数のものを扱っているならば、非同期javascriptはすでに苦痛であるという事実を投げてください。

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