0

I'm trying to dynamically include a template into my index.html. The general structure of index.html is:

<body>

  <header ng-controller="Main">
    <section>
      <!-- global stuff -->
    </section>
    <section ng-include="moduleName + '/views/menubar.html'">
      <!-- module-based stuff -->
    </section>
  </header>

  <div id="view" ng-view></div>

</body>

Sample URL

example.com/<app_name>/index.html#/<module_name>[/method_name]

I can't figure out how to update $scope.moduleName when the route changes. My trouble is two-fold:

  1. The header's controller is Main, not the controller associated with the view, so I can't? update $scope.moduleName from the view's controller (because Main and the view's controller are siblings).

  2. In Main, I tried setting a $scope.$on('$routeChangeSuccess',…), but apparently it is not notified of route changes.

I've thought of setting up a $rootScope.$on listener (as described in SO#15355346) for the route change and broadcasting down to children, who then emit back up their route, which is broadcasted back down so it is available to Main. But that seems heinous.

And I would really prefer to keep the header outside of ng-view.

EDIT I noticed that $route.current.scope has an object named with module_name (possibly because the name of the controller associated with the route's module_name is the same). I'm wondering if I might be able to somehow use the name of that object…

Community
  • 1
  • 1
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126

1 Answers1

1

It's hard to say what's wrong in your code without the full picture. Things you show look fine to me.

Please see this plunk I've created to display the ability to do it. Take note that you also can extend route objects with custom properties, like moduleName here:

    $routeProvider.when('/page1', {
        template: 'one',
        controller: 'one',
        moduleName: 'firstModule'
    });
Dmitry Evseev
  • 11,533
  • 3
  • 34
  • 48