0

New Angular JS coder, minor issue.

Defining this:

<div>
    <div ng-controller="myController" ng-app="myApp">
        <div ui-grid="gridOptions" ui-grid-tree-view ui-grid-grouping class="grid"></div>
    </div>
</div>

and then

<script>
    var app = angular.module("myApp", [...])
    .controller("myController", [...,function(...){ ... }]);
</script>

works fine. I can populate data into the controller and the grid and the world is a fun and happy place.

Now. I change the markup to THIS (moving the ng-app up to an outer div):

<div ng-app="myApp">
    <div ng-controller="myController">
        <div ui-grid="gridOptions" ui-grid-tree-view ui-grid-grouping class="grid"></div>
    </div>
</div>

and the world apparently explodes. The grid no longer populates; the CSS for it is there but no data in it at all. I've tried in the contentplaceholder, I've tried in all the divs that contain that section of code, but at the most simple it still doesn't work if I move it so much as one element level up.

Details: child page inside a master (all the defines for angular are in the page itself, not in the master), several levels of element containers, can confirm that the data populates if the ng-app is in the same tag as the ng-controller, but not when it's above it.

SliderBlackrose
  • 111
  • 6
  • 1
    Are you sure its a child and not a sibling of your ng-app? – Summer Developer Nov 04 '16 at 18:41
  • Maybe you can provide a plunker – vlio20 Nov 04 '16 at 18:41
  • Yar, I even checked the various browser dev tools and the like to ensure I wasn't getting weird markup. All is well in this family tree. I'd provide a plunker but the page itself is rather complex and full of goodies pulled back from JSON data from a DB and all. Thought it formatting the markup and script doesn't work, I'm at a loss. It's odd to me that it works when together with the controller but not when above it. >. – SliderBlackrose Nov 04 '16 at 18:54

1 Answers1

0

Please take a look at the following plunker: http://plnkr.co/edit/NRyCjTonKrkcibd9607f?p=preview

Try to compare your code with this one, it uses the same html as you said that not working for you: 

<div ng-app="app">
  <div ng-controller="MainCtrl">
    <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
  </div>
</div>
vlio20
  • 8,955
  • 18
  • 95
  • 180
  • I checked this. The data is being set in the controller via an $http.get(). As I said, the data populates great when it's but not when they're separated. Silly separation anxiety. – SliderBlackrose Nov 04 '16 at 18:55
  • Please provide some plunker to play with. It sounds very odd – vlio20 Nov 04 '16 at 19:35
  • Will do when I get home. Will be fairly hard to recreate. Been bouncing more things around and still not getting results. I am fail to angular, apparently. o.o – SliderBlackrose Nov 04 '16 at 20:51