Question

我有以下控制器

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>

当我最初在文本字段中给出一个url并单击Summarize时，它按预期工作。但是，当我更改文本字段中的值并再次单击该按钮时，每个事物都会使用新值正确更新，但$scope._article获取新值并且不会删除旧值。它显示之前的旧值和旧值。

为什么会这样？

编辑＃1：我添加了更多代码。我发现当我删除$timeout(function(){...})部分时，它按预期工作。所以现在问题是，为什么$scope._article保留旧值并预先挂起新值？

编辑＃2：我发现$timeout(...)不是问题所在。如果我改变

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

到

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

它的行为方式仍然相同。所以现在我假设它是因为我将$ scope._article更改为其他内容？发生的事情是我正在显示$scope._article值，然后修改显示的内容以包含要突出显示的高亮显示<em class='highlighed'> ... </em>。

编辑＃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()会给出奇怪的输出，因为angular有它自己的同步系统和你正在使用的jquery库有它自己的工作方式DOM。如果你正在处理多件事情，那么异步javascript已经很痛苦了。

你想要的是将html设置为角度范围变量，然后在jquery中使用它，这样你才知道jquery正在使用什么，即：

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

为什么angular $ scope不会删除旧值？

1 个答案: