Child directive not updated when parent directive property changes

Question

This is follow up to these 2 questions:

1. Pass argument between parent and child directives
2. Parent directive controller undefined when passing to child dire

Answer 1

Solution 1

i've set up a working plnkr here: https://plnkr.co/edit/fsxMJPAc05imhBqefaRk?p=preview

the reason of this behaviour is that tmpMenuLink kept a copy of the value returned from MyDirectiveCtrl.isDisabled(). no watcher is set up , so the only way to resolve this is to manually watch for any changes and then update the field.

scope.$watch(function(){
  return MyDirectiveCtrl.isDisabled();
}, function(){
   scope.disabled = MyDirectiveCtrl.isDisabled();
})

Solution 2

An alternative without watchers is to pass the reference of an object instead of a primitive type, something like:

$scope.menuStatus = {status: false};

new plnkr here: https://plnkr.co/edit/RGEK6TUuE7gkPDS6ygZe?p=preview