Angular Child Scope value doesn't bind correctly

Question

I'm writing an angular app where I need to bind values to some child scope. In the controller, I have:

var addToStack = function(fallingItemOrder, scope) {
  scope.model.stageChimneys[fallingItemOrder].Stack += 1;
  return (scope.model.stageChimneys[fallingItemOrder].Stack === 3);
};

Where scope is referenced to $scope with $id=2 (I guess it's 2 because it lives under an ng-view directive.)

The main view has this code:

<ul class="chimneysUL">
  <li ng-repeat="chimney in model.stageChimneys" ng-include="model.chimneyUrl"></li>
</ul>

And the ng-include fetches this sub-view, which is rendered 5 times with different data:

<div class="chimney" id="{{chimney.LetterCode}}" data-order="{{$parent.$index}}">
  <div class="pipeHead"></div>
  <div class="pipeBody">
    <table class="ulInsertedLetters">
      <tr ng-repeat="i in model.getNumber(model.stackSize) track by $index" ng-class="3 - $index <= chimney.Stack ? 'showInserted' : 'hideInserted'">
        <td>
          <img class="insertedLetterImg" data-ng-src="{{'../../Images/Cards/rectangle.jpg'}}" />
        </td>
      </tr>
    </table>
  </div>
  <div class="picContainer">
    <img class="card" data-ng-src="{{chimney.PicName}}" />
  </div>
</div>

All bindings seem to be correct (e.g. chimney.LetterCode etc..) but when addToStack executes, the {{chimney.Stack}} remains unchanged.

As I understand scopes, if the parent scope with $id = 2 has it's model properties change, then those changes should permeate down and reflect instantaneously in the html view.

And indeed in debugging, I can see that diving into $$childTail --> $$prevSibling, the chimney object has it's Stack property incremented.

So what's the missing part I've overlooked?

Suggest you create a demo that replicates problem. We can't see where addtoStack is even being used — charlietfl
– charlietfl, Commented Mar 1, 2015 at 14:52
each <tr> should have a showInserted or hideInserted depending on the calculation in ng-class. — yaron hochman
– yaron hochman, Commented Mar 1, 2015 at 18:06

yaron hochman · Accepted Answer · 2015-03-01 21:52:13Z

1

There's an issue in conception. Whatever's inside your included template shouldn't try and access what's outside. You should use a directive instead.

I'm not 100% sure, but I think that ng-include creates another scope. So whatever modification that happens in your main view is not reported to your included template because the value in that new scope wasn't changed.

Edit:

If you call your function from outside a digest (for instance in a callback passed to a 3rd-party library, on in a setTimeout function), the view will not be updated, because angular has no way of knowing a value has changed.. In that case, you have to surround your call with a $scope.$apply() call.

edited Mar 1, 2015 at 21:52

yaron hochman

2071 gold badge3 silver badges7 bronze badges

answered Mar 1, 2015 at 13:44

jlowcs

1,9331 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

yaron hochman Over a year ago

Is there a built-in directive for such interactions? I find it odd that such a barrier was placed between the main view and it's included templates in angular. guess it's engineered like this for a good reason...

jlowcs Over a year ago

Well, i makes sense that a template should be self-contained. Why would a template be aware of whatever template is including it? You should pass arguments to that template, and the only way to do that is to transform that template into a directive, which is not as hard as it seems.

Omri Aharon Over a year ago

@yaronhochman Actually, the included template is aware of the outer scope. You don't have to change to directive.

jlowcs Over a year ago

Also, there's nothing wrong with including templates in the main view, as long as they're not sharing variables. I made that mistake in my early angular days, and now I'm refactoring my code using directives. And keep in mind that pure controllers are gonna disappear in angular 2.0 and everything is basically gonna be directives. Might as well start coding that way now :)

jlowcs Over a year ago

That being said, @omri-aharon is right, you should be able to access chimney.Stack and watch its changes inside your template...

|

Collectives™ on Stack Overflow

Angular Child Scope value doesn't bind correctly

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related