I have a directive that takes an array of objects. When declaring the directive in markup, the scope has an array of objects that wrap the ones needed by the directive. So I need to apply a map function on the array. What's the right way to do this so updates made to the original array are reflected inside the directive?
Here's a Plunker with a naive approach (which I was surprised to see mostly "work" except for lots of $digest errors): http://plnkr.co/edit/GUCZ3c
You should avoid calling a function from an Angular expression unless, among other things, that function does some very lightweight work (a quick computation, for instance). This question has more details on that matter.
In your case, you should cache the name list and bind it to the directive. Here's an example:
app.controller('MainCtrl', function($scope) {
$scope.people = [
{ name: 'Alice'},
{ name: 'Bob' },
{ name: 'Chuck' }
];
$scope.addName = function(name) {
$scope.people.push({name: name});
};
$scope.$watch(function() { return $scope.people.length; }, function() {
$scope.names = $scope.people.map(function(p) { return p.name; });
});
});
Your directive code remains the same. Here's a fork of your Plunker.
Update: I've changed the code so it uses a $watch to update the name list automatically, following @KrisBraun advice.
$watch to update the cache automatically. I'll update the post to use it.I believe you need to treat expressions a little differently when binding them to your isolated scope. Here is a forked plunker.
app.directive('myDirective', function($compile) {
return {
restrict: 'E',
scope: {
names: '&namesFunc'
},
template: '<div><p>JSON: {{names() | json}}</p><p>Names:</p><ul><li ng-repeat="name in names()">{{name}}</li></ul></div>',
replace: true,
link: function(scope, elem, attr, ctrl) {
}
};
});
& bindings are not updated. They just provide a way to execute an expression in the context of the parent scope. In this case, the directive is calling getName() defined in the parent scope.