Databases
StackOverflow2013
Postsdbo
POAngularJs directive not updating another directive's scope
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJs directive not updating another directive's scope
    primarykey
    data
    text
    <p>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.</p> <p>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". </p> <p>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).</p> <pre><code>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); }; </code></pre> <p>This is the child directive that should get the model:</p> <pre><code>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); </code></pre> <p>The parent's template calls the warranty modal's directive like this:</p> <pre><code>&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; </code></pre> <p>Any ideas what's missing or how I can troubleshoot this further?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRobert Corvus
    1. USRobert Corvus
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload