Amelia Earheart Amelia Earheart - 5 months ago 7
AngularJS Question

angular js: Not able to pass value from controller to html of an included page

I have a header which remains common for all the pages. So, I included it in my index page like this.

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>

<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>


header.html

<ul>
<li>{{vm.myName}}"></li>
</ul>


My app.js file looks like this.

( function () {

angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])

.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);

})();


I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from
headerController.js
to it's view
header.html


As you can see, there is only one variable in my header.html

On the other side,
headerController.js
communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:

{"myName":"Amelia Earheart"}


and here is my headerController.js

(function() {

angular
.module('myApp.header', [])

.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})

.controller('CommonController', function($scope, $routeParams, myCommonService) {

var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});

});
})();


Can anyone tell why I am not getting the value in html view?

Answer

You should link your view with your controller. Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="assets/lib/angular.js"></script>
        <script src="assets/lib/angular-route.js"></script>

        <script src="headerController.js"></script>
        <script src="HomeController.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
        <div class="main" ng-view></div>
    </body>
</html>

And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :

.controller('CommonController', function($scope, $routeParams, myCommonService) {

    myCommonService.getName().success(function(data) {
        $scope.myName   = data.myName;
    });

});

If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick. If you don't do this, you'll have to update your header.html to :

<ul>
    <li>{{myName}}</li>
</ul>