CODEWITHSUNDEEP
angularjs
MChan
MChan

Reputation: 7162

AngularJS handling data outside ng-view

Inside my AngularJS app index.html page I have three main divs (top, footer and ) which display different views depending on current route. The problem I am facing now is that I need to display some data in the footer area, including data that will require loop (ex. list of States, Cities...etc) but I am not sure how to display data in index.html outside of the ng-view. So can someone tell me how this can be accomplished? Any example code is highly appreciated. Thanks

Below is my index.html structure, App.js

app.js

var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/', 
  {     templateUrl: 'templates/home.html', 
        controller: 'HController',
        title: 'Home',

  });

}]);

Index.html

  <html lang="en" ng-app="myApp">
  <head>...</head>
  <div id="header">....</div>
  <div ng-view></div>
  <div id="header">
     <!-- Here is where I need to loop to display data -->
  </div>

Upvotes: 1

Views: 1992

Answers (1)

musically_ut
musically_ut

Reputation: 34288

Using ngRoute and ng-view does not preclude using ng-controller and other angular constructs in your code as long as the code resides inside an element which has ng-app attribute (or has been bootstrapped).

So, since you have ng-app attribute on html, you can define a new controller and use it in #header:

index.html:

<div id="header" ng-controller="headerController">
   {{myData}}
   <!-- Here is where I need to loop to display data -->
</div>

app.js:

myApp.controller('headerController', 
    [ '$scope', function ($scope) { 
        $scope.myData = 'Stuff.'; 
    }]
);

Upvotes: 1

Related Questions