Databinding and parent scope in angular not updating

Question

So I've been making progress on a problem I've been having but I'm not sure where to go from here.

In my code I have a module, and then a directive outside of the modules on its own, but it is injected.

I have an object called registrants, in the parent scope. When I kick in the directive, any activity in the directive modifies the parent scope and registrants will update. However, I have another variable registrantCount that should be updating as the registrant list length increases but it isn't. Can someone explain to me why?

Here is the snippet of my code that contains all the relevant peices below, if there is a variable that is shown that I didn't mention in the description above, assume the data is correct for it, for the sake of completion. The only variables I am concerned with are the two I mentioned in my initial problem statement.

module

angular.module('register', [])
.controller('Register', function($scope, $rootScope, $http){
    $scope.registrants = {};
    $scope.registrantCount = 0;

    $http({
        url : 'apiLink for initial data'
    }).then(function(data){
        $scope.employeeList = data.data.payload[0]; // initial list to allow the directive to function
    });
});

directive

angular.module('register.check', [])
.directive('attendees', function($http){
    return {
        restrict : 'EA',
        scope : false,
        templateUrl : 'template',
        link : function(scope, elem, attrs){
            angular.forEach(companies, function(c, key){
                if(c.companyID == id){
                   scope.registrants = c.registrants; // this object is modified in the directive template
                   scope.registrantCount = scope.registrants.length; // this variable is located in the parent template, not the directive template
                }
            });
        })
     };   
});

Again please note that the directive will modify the parent scope object of registrants but it will not modify the registrant count, nor will it generate a correct length in the parent variable if i modify it in the directive. I am very confused on this matter. Thank you for all the help ahead of time!

@mark-hill, unlike `registrants`, `registrantCount` is a literal binding (i.e. `number` type), so updates within your directive may not appear as expected. Try throwing the count inside another object and do the update through that for confirmation that this might be the problem. — miqh, Oct 07 '16 at 00:04

score 1 · Accepted Answer · edited May 23 '17 at 12:19

Take a look at this post for a more in-depth explanation of what's going on, but in short:

Binding in Angular can be kind of tricky. Because $scope.registrants is an object, the child scope (your directive) references it directly - it's pointing to the same object. Because $scope.registrantsCount is an integer (consider it a primitive type), your directive creates a separate variable for it and the two-way binding is broken.

Two options: Do as miqid suggested, and create an object containing registrantsCount:

$scope.registrantsCount = { count: 0 }

and update it in your directive thusly:

scope.registrantsCount.count = scope.registrants.length;

...or create a function in your controller and call it from your directive:

// in controller
$scope.registrantsCount = 0;
$scope.updateRegistrantsCount = function(count) {
    $scope.registrantsCount = count;
}
// in directive
scope.updateRegistrantsCount(c.registrants.length);

I prefer the latter.

Databinding and parent scope in angular not updating

1 Answers1