NG include scope

Question

I've read tons regarding ng-include scope issue but none seem to address the simple thing I'm trying to do. Hope someone can clarify. This is a simplified version of what I'm trying to do but encapsulates the issue .

Here's the main page

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head >
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">
</head>
   <body>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module('MyApp', []);
        </script>
        <div ng-include="'/Menu.html'" ></div>
    </body>

</html>

and here is Menu.html

    <div id="sidebar-wrapper" ng-app="MyApp" ng-controller="MenuController">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Header
            </a>
        </li>
        <li>
            <a href="\Login.html">Sign In</a>
        </li>
        <li ng-repeat="menuItem in MainMenu.Labels">
            <a href="#">{{menuItem}}</a>
        </li>
    </ul>
    <script>

        app.controller('MenuController', function($scope) {
            $scope.MainMenu = {"Labels":["Status","Setup"]} // this code never executes
        });
    </script>
</div>

How can I create a variable for binding inside menu.html... I can do this outside , but our engine will be generating the menu when that file is requested..

I think that the general usage of ngInclude is to load a template, and it would be better to separate scripts from templates. — David Fang
– David Fang, Commented Dec 9, 2015 at 1:38

syllabix · Accepted Answer · 2015-12-09 01:57:40Z

The issue you are facing is not actually a scope issue in this case, but rather how you are setting up your angular app. By putting the code that initializes and assigns the controller to the app in the include, the MenuController is undefined when angular tries to compile the newly included view, and the code will never run, and actually should be throwing errors in the console. I would recommend one of the following:

Remove the angular script from the templates themselves and set them up in their own files with the entire app and its modules set up to be initialized before runtime.
While i don't fully understand what you mean by Engine generating the Menu - it sounds like you are trying to use a template language to actually generate the literal javascript between the script tags from a view model of sorts to set the values. If this is the case, I would advise against this and use an angular service and the $http provider to make an ajax call to set those values in memory.
If you must structure your app this way, you will have to look into lazy loading the controller with a library like this one - https://github.com/matys84pl/angularjs-requirejs-lazy-controllers. I have not used it but from a quick browse through the readme, it appears it might be able to solve your issue will maintaining the structure of your app.

If I move the controller creation code outside of the file , how do I set the data in the scope so that I can bind ? We are using a custom web engine that has is limited so at the time this menu.html file is requested, the sever will generate the data.. Is there no way to create a controller inside Menu.html ? So many thanks for replying !!!!

Collectives™ on Stack Overflow

NG include scope

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related