Exploring Angular directives with isolated scopes has led me to an intriguing situation. Upon calling a function from the local scope that alters a $scope variable's content, I noticed that it does not affect the DOM. For instance, when adding a new element to the $scope.customers list, the ngRepeat does not trigger, resulting in the section of the DOM where the ngRepeat items should be rendered remaining unaffected.
Directive snippet:
function addItem() {
scope.add();
items.push({
name: 'New Directive Customer'
});
scope.$broadcast("refresh");
render();
}
...
return {
restrict: 'EA',
scope: {
datasource: '=',
add: '&',
},
link: link
};
Local function snippet:
$scope.addCustomer = function() {
counter++;
$scope.customers.push({
name: 'New Customer' + counter,
street: counter + ' Cedar Point St.'
});
alert($scope.customers.length);
};
DOM section with ngRepeat:
<isolate-scope-with-controller datasource="customers" add="addCustomer()"></isolate-scope-with-controller>
<hr />
<div>
<ul>
<li ng-repeat="customer in customers">{{customer.name}}</li>
</ul>
</div>
The alert() function will display that the $scope.customers array grows with each button click, yet the ngRepeat fails to update the DOM.
Complete code sample: http://plnkr.co/edit/8tUzKbKxK0twJsB6i104
My question pertains to whether it is possible to trigger DOM changes from such directives in any way?
Appreciate your assistance