How to pass data to a ng-include controller?

Question

I have an ng-include html element, and want to pass some data from outside to the controller.

The main controller fetches json data from a http webservice, and extracts the data into the scoped variable climadata.

The following is pseudocode, but you get the idea:

function mainController($scope, $http) {
    $http.get().then(
        $scope.climadata = response.clima;
    );
}

<div ng-controller="mainController">
    <div ng-include="'clima.html'" ng-controller="climaController" onload="climamodel = climadata"></div>
</div>

This works fine, BUT the climadata never reaches the climaController. Checked as follows:

function climateController($scope) {
    console.log($scope.climamodel); //prints "undefinied"
};

The climamodel is always undefined in console, but why?

Isn't is possible without introducing a service for just handing the modeldata back and forth? — membersound, Oct 23 '15 at 09:52
normaly, you don't to do anything to get climamodel from the mainController because it's the controller parent of climateController. — hic1086, Oct 23 '15 at 09:55
Possible duplicate of [AngularJS : How can I pass variables between controllers?](http://stackoverflow.com/questions/12008908/angularjs-how-can-i-pass-variables-between-controllers) — Ramesh Rajendran, Oct 23 '15 at 10:00
@membersound, can you just check the value of $scope inside your, $http.get function. Sometimes, it takes it to be window — ShivangiBilora, Oct 23 '15 at 10:02

Kalhan.Toress · Accepted Answer · 2015-10-23T10:11:04.153

This is working, the reason you getting the undefined is because, you get the data by $http request, because of that, before you get the data climaController will execute, at that point there is no scope variable call climadata.

check this DEMO

you can see the console is printing undefined but you will get the data on partial HTML page after the data is available after ajax request.

If you want to load the inclcude after the ajax is complete then use ng-if

<div ng-if="climadata" ng-include="'clima.html'" ng-controller="climaController"></div>

if climadata is present then only this div process that means include works only if climadata is available.

DEMO

and you can void from onload="climamodel = climadata"

I think this is main of the reason +1. But i did't test it. – Ramesh Rajendran Oct 23 '15 at 10:13 — Ramesh Rajendran, Oct 23 '15 at 10:13

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

First you need to change onload to ng-load or ng-init. because onload can't read the angular properties.
You can use $rootScope , It is helps to pass values from a controller to another controller.

function climateController($rootScope ) { console.log($rootScope.climamodel); };

Also some other details, you can get here : AngularJS: How can I pass variables between controllers?

edited May 23 '17 at 12:16

Community

1
1

answered Oct 23 '15 at 09:56

Ramesh Rajendran

37,412
45
153
234

This also gives me `undefined`. – membersound Oct 23 '15 at 09:57
@membersound, have you assigned `climamodel` to `rootscope` ? – Rayon Oct 23 '15 at 09:58
No, just to normale `$scope`. – membersound Oct 23 '15 at 10:01
I would use a service. – Cranio Oct 23 '15 at 10:03
@Cranio, How about directive ? – Rayon Oct 23 '15 at 10:04

score 0 · Answer 3 · answered Oct 23 '15 at 09:57

0

Try this:

    function mainController($scope, $http) {
     $scope.data={};
        $http.get().then(
            $scope.data.climadata = response.clima;
        );
    }

    <div ng-controller="mainController">
        <div ng-include="clima.html" ng-controller="climaController">/div>
    </div>

answered Oct 23 '15 at 09:57

hic1086

755
3
10

I'm still getting `undefined` for `console.log($scope.data.climadata)` in `climaController`. – membersound Oct 23 '15 at 10:00
you have to do the console.log when you the $http.get deliver it's response. – hic1086 Oct 23 '15 at 10:02

score 0 · Answer 4 · answered Oct 23 '15 at 10:02

I think the best way would be to use $broadcast

It is essentially a service to propogate events to child scopes(read: child controllers). The child controllers listen for the $broadcast event using the $on service.

Here's how you can implement it. In your MainController:

function mainController($scope, $http, $broadcast) { //injected broadcast
    $http.get().then(
        $scope.climadata = response.clima;
        $scope.$broadcast('climaData', $scope.climadata); //broadcast event 'climaData' and send '$scope.climadata' as argument.
    );
}

In your climateController:

function climateController($scope) {
    $scope.$on('climaData', function(event, args) { //listener for 'climaData' event.
        console.log(args); //args contains $scope.climadata sent from the main controller.
    }) 
};

score 0 · Answer 5 · answered Oct 23 '15 at 10:20

i think sharing data through scope inheritance creates spaghetti code. One should inspect your code and template to understand what is going on.

For your problem i would create a service which will load and cache data. This service could be injected to both controllers.

here is sample code

module.factory('UserService', ['$http', '$q', function($http, $q){
var userAPI = {};
var userData = null;
var isLoading = false;

userAPI.getMyData = function(){
    var deferred = $q.defer();
    if(userData != null){
        deferred.resolve(userData);
    } else if(isLoading === false) {
        isLoading = true;
        $http.get('/api/data/data').then(function(resp){
            userData = resp.data;
            deferred.resolve(userData);
        }, function(err){
            deferred.reject(err);
        });
    }

    return deferred.promise;

};

return userAPI;
}]);

How to pass data to a ng-include controller?

5 Answers5

Linked