javascript - Why did the model Array here not update in the DOM after updating in the Controller? -
http://plnkr.co/edit/7onkagvvnxwlwn5fzqju?p=preview
i'm setting question related infinite scroll , noticed when update $scope.tags array have once tags have been scrolled way up, tags don't update.
in project use service grab new data, in example i'm resetting values inside of tags array.
why did not update in dom?
markup:
<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> controller:
// 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 reach bottom of column, // , attempt update 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); }
you need call $scope.apply() after update because event / code outside of digest cycle.. here go:
// 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); } })();
Comments
Post a Comment