Watcher on $attrs.itemsPerPage added multiple times means all fire

[adandersen]

I am using bootstrap pagination twice on a page, once above the content and once below. For both of these, the $attrs.itemsPerPage watcher in pagination.js on line 17 is added. When I modify itemsPerPage both watches fire. This is undesirable as update logic on my page is tied to the changing of the page number which calculateTotalPages() can cause to occur. This in turn causes ng-change to fire twice.

The current code is this.

$scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
        self.itemsPerPage = parseInt(value, 10);
        $scope.totalPages = self.calculateTotalPages();
});

Would this be a good solution?

$scope.$parent.$watch($parse($attrs.itemsPerPage), function(newValue, oldValue) {
        if (newValue !== oldValue)
        {
                self.itemsPerPage = parseInt(newValue, 10);
                $scope.totalPages = self.calculateTotalPages();
        }
});

edit: what I thought was happening isn't actually happening (its still being called twice) but ng-change is not being fired twice due to that, that was something weird going on in the code I'm refactoring.

[wesleycho]

So something that should be noted, the $watch callback will only fire if newValue !== oldValue is already true. Something else is likely going on with what you are observing.

Here is a Plunker for you to modify/tweak if it helps for you to find what is the problem.