1

I have an html file with ng-includes inside

<div ng-controller="MapMenuCtrl">
    <div class="mapMenu row">
        <ng-include src="'partials/mapMenu/filterDropdown.html'"></ng-include>
        <ng-include src="'partials/mapMenu/alertDropdown.html'"></ng-include>
        <ng-include src="'partials/mapMenu/investigationDropdown.html'"></ng-include>
    </div>
</div>

The problem is that I need MapMenuCtrl for each of ng-include. But when it is set as in example, it works, but only a half. For example in one of this files I use ng-model for one of $scope variables of MapMenuCtrl and it doesn't bind. I was trying to set controller for each of ng-include, but it loads 3 times, though I need only 1. I hope you understood me. I know, that my english is quite bad

Kate Lizogubova
  • 193
  • 1
  • 5

1 Answers1

0

ng-include creates a new scope. Put an object on the controller scope and put all bindable stuf inside. You can call it model for example. Then the bindings should work as expected.

Here is a link for a details of the problem you face i believe: Does my ng-model really need to have a dot to avoid child $scope problems?

Community
  • 1
  • 1
stride
  • 1,931
  • 1
  • 17
  • 20
  • Thank you :) Maybe you know, inside ng-include I have dropdown with scrollable list. When it is outside of ng-include it perfectly works, but when I add it inside of ng-include(I didn't change any row), my dropdown become longer and scrollbar disappear. – Kate Lizogubova Jun 19 '14 at 13:49
  • i would expect it to be exactly the same problem as above. The way you bind select is referring to scope introduced by ng-include and not parent scope that has proper data. Make sure every part of the select in bindings and expressions has a . so it queries scope before setting values. – stride Jun 19 '14 at 13:59
  • I found what was the problem. I set max-height of my dropdown with help of jQuery, and this code was in my MapMenuCtrl, so it hasn't trigged on first load of Ctrl. – Kate Lizogubova Jun 19 '14 at 15:07