为什么这里的model Array 在Controller 更新后DOM 没有更新？

Question

http://plnkr.co/edit/7OnKAGvVNXWLwN5fZqJu?p=preview

我正在设置一个与无限滚动相关的问题，并注意到当我更新 $scope.tags 数组时，一旦标签一直向上滚动，标签实际上并没有更新.

在我的项目中，我使用服务来获取新数据，但是在这个例子中，我只是重置 tags 数组中的值。

为什么在 DOM 中没有更新？

标记：

<section id="tags-col" class="tag-column column">
    <ul id="tags-panel-list">
        <li ng-repeat="tag in tags">
            <div class="tag">{{tag.term}}</div>
        </li>
    </ul>
</section>

<div>{{tags}}</div>

控制器：

// Tags panel Controller:
TagsPanelCtrl.$inject = ['$scope', '$timeout'];
function TagsPanelCtrl($scope, $timeout) {

  var tagsCol = document.getElementById("tags-col");

  $scope.tags = [
    { term: "tag1" },
    { term: "tag2" },
    { term: "tag3" },
    { term: "tag4" },
    { term: "tag5" },
    { term: "tag6" },
    { term: "tag7" },
    { term: "tag8" },
    { term: "tag9" },
    { term: "tag10"},
    { term: "tag1" },
    { term: "tag2" },
    { term: "tag3" },
    { term: "tag4" },
    { term: "tag5" },
    { term: "tag6" },
    { term: "tag7" },
    { term: "tag8" },
    { term: "tag9" },
    { term: "tag10"}
  ];

  var scrollingElement =  function(event) {
    console.log(tagsCol.scrollHeight - tagsCol.scrollTop);

    if ((tagsCol.scrollHeight - tagsCol.scrollTop) === tagsCol.offsetHeight) {
      console.log('reached bottom!');

      // Here you reach the bottom of the column,
      // and I attempt to update the tags array
      $scope.tags = [
        { term: "tag1" },
        { term: "tag2" },
        { term: "tag3" },
        { term: "tag4" },
        { term: "tag5" },
        { term: "tag6" },
        { term: "tag7" },
        { term: "tag8" },
        { term: "tag9" },
        { term: "tag10"},
        { term: "tag11"},
        { term: "tag12"},
        { term: "tag13"},
        { term: "tag14"},
        { term: "tag15"},
        { term: "tag16"},
        { term: "tag17"},
        { term: "tag18"},
        { term: "tag19"},
        { term: "tag20"},
        { term: "tag21"},
        { term: "tag22"},
        { term: "tag23"},
        { term: "tag24"},
        { term: "tag25"},
        { term: "tag26"},
        { term: "tag27"},
        { term: "tag28"},
        { term: "tag29"},
        { term: "tag30"}
      ];
    }
  };

  document.getElementById('tags-col').addEventListener('scroll', scrollingElement);

}

Answer 1

您需要在更新后调用 $scope.apply()，因为您的事件/代码不在摘要周期内。现在开始：

// Code goes here

/*global angular*/
(function() { "use strict";

    var app = angular.module('tagsApp', [
        'tagsPanelDirective'
    ])
    .controller('DashCtrl', Controller)
    Controller.$inject = ['$scope'];

    function Controller($scope) {

      /** Init DashCtrl scope */
      /** ------------------- */
    }
})();

(function() { "use strict";

    angular
        .module('tagsPanelDirective', [])
        .directive('tagsPanel', directive);

    function directive () {
        var directive = {
            templateUrl: "tagsPanel.html",
            restrict: "E",
            replace: true,
            bindToController: true,
            controller: TagsPanelCtrl,
            controllerAs: 'tgspnl',
            link: link,
            scope: {}
        };
        return directive;
        function link(scope, element, attrs) {
        }
    }

    // Tags panel Controller:
    TagsPanelCtrl.$inject = ['$scope', '$timeout'];
    function TagsPanelCtrl($scope, $timeout) {

      var tagsCol = document.getElementById("tags-col");

      $scope.tags = [
        { term: "tag1" },
        { term: "tag2" },
        { term: "tag3" },
        { term: "tag4" },
        { term: "tag5" },
        { term: "tag6" },
        { term: "tag7" },
        { term: "tag8" },
        { term: "tag9" },
        { term: "tag10"},
        { term: "tag1" },
        { term: "tag2" },
        { term: "tag3" },
        { term: "tag4" },
        { term: "tag5" },
        { term: "tag6" },
        { term: "tag7" },
        { term: "tag8" },
        { term: "tag9" },
        { term: "tag10"}
      ];

      var scrollingElement =  function(event) {
        // tagsCol.scrollTop = tagsCol.scrollHeight;

        // console.log(tagsCol.scrollTop);
        // console.log(tagsCol.scrollHeight);
        console.log(tagsCol.scrollHeight - tagsCol.scrollTop);
        // console.log(tagsCol.offsetHeight);

        if ((tagsCol.scrollHeight - tagsCol.scrollTop) === tagsCol.offsetHeight) {
          console.log('reached bottom!');

          $scope.tags = [
            { term: "tag1" },
            { term: "tag2" },
            { term: "tag3" },
            { term: "tag4" },
            { term: "tag5" },
            { term: "tag6" },
            { term: "tag7" },
            { term: "tag8" },
            { term: "tag9" },
            { term: "tag10"},
            { term: "tag11"},
            { term: "tag12"},
            { term: "tag13"},
            { term: "tag14"},
            { term: "tag15"},
            { term: "tag16"},
            { term: "tag17"},
            { term: "tag18"},
            { term: "tag19"},
            { term: "tag20"},
            { term: "tag21"},
            { term: "tag22"},
            { term: "tag23"},
            { term: "tag24"},
            { term: "tag25"},
            { term: "tag26"},
            { term: "tag27"},
            { term: "tag28"},
            { term: "tag29"},
            { term: "tag30"}
          ];

          $scope.$apply()
        }
      };

      document.getElementById('tags-col').addEventListener('scroll', scrollingElement);

    }
})();

http://plnkr.co/edit/CX7D4RnTx8pyjNzNKK7U

为什么这里的model Array 在Controller 更新后DOM 没有更新？

Why did the model Array here not update in the DOM after updating in the Controller?

javascript

angularjs

angularjs-ng-repeat

angularjs-model