AngularJs directive not updating another directive s scope

Question

I have a parent directive that has a function that loads a modal div with data after a service call   I have confirmed that the service correctly returns data  but that data model is never passed to the child directive s scope through the template   Notice below that the parentDirective s scope warrantymodel is set by the loadModal function   Also notice that in the parent template  the  warrantymodel  should be mapped to the warrantyDirective s  model      I ve debugged through the code with chrome debugger and batarang  but the scope  watch  model      call fires on page load but never fires after the button click loads the data   I even tried the deep watch switch in the scope  watch call  i e  the  true  value    app directive  parentDirective     myService   function myService      return         scope             warranty                 ocode                         restrict   EA           templateUrl    content templates parent html           link  function scope           scope loadModal   function   event                  TODO  this gets data but it doesnt bind to the modal s model             scope warrantymodel                      myService getDataStuff scope warranty  scope ocode            This is the child directive that should get the model   app directive  warrantyDirective    function          return           scope                model                         restrict   EA           templateUrl    content templates warranty html           link  function scope                scope  watch  model   function  newValue  oldValue                                this alert never fires after page load                             I have verified that the newValue has a value                              and is different than the original value                               original value is undefined on page load                            alert   watch model       newValue                                 do dom manipulation and other stuff                          true     The parent s template calls the warranty modal s directive like this    lt a data-ng-if  warranty  data-loading-text  Please wait          data-ng-click  loadModal  event   gt   ptext   lt  a gt    lt div data-ng-if  warranty  gt       lt div warranty-directive model  warrantymodel  gt  lt  div gt   lt  div gt    Any ideas what s missing or how I can troubleshoot this further

User · Answer

Just wondering why you are using 2 directives?

It seems like, in this case it would be more straightforward to have a controller as the parent - handle adding the data from your service to its $scope, and pass the model you need from there into your warrantyDirective.

Or for that matter, you could use 0 directives to achieve the same result. (ie. move all functionality out of the separate directives and into a single controller).

It doesn't look like you're doing any explicit DOM transformation here, so in this case, perhaps using 2 directives is overcomplicating things.

Alternatively, have a look at the Angular documentation for directives: http://docs.angularjs.org/guide/directive The very last example at the bottom of the page explains how to wire up dependent directives.

[angularjs] AngularJs directive not updating another directive's scope

Examples related to angularjs