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
– membersound, Commented Oct 23, 2015 at 9:52
normaly, you don't to do anything to get climamodel from the mainController because it's the controller parent of climateController. — hic1086
– hic1086, Commented Oct 23, 2015 at 9:55
Possible duplicate of AngularJS : How can I pass variables between controllers? — Ramesh Rajendran
– Ramesh Rajendran, Commented Oct 23, 2015 at 10:00

Kalhan · Accepted Answer · 2015-10-23 10:11:04Z

6

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"

edited Oct 23, 2015 at 10:11

answered Oct 23, 2015 at 10:04

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ramesh Rajendran Over a year ago

I think this is main of the reason +1. But i did't test it.

hic1086 · Accepted Answer · 2015-10-23 09:57:14Z

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, 2015 at 9:57

hic1086

7553 silver badges10 bronze badges

2 Comments

membersound Over a year ago

I'm still getting undefined for console.log($scope.data.climadata) in climaController.

hic1086 Over a year ago

you have to do the console.log when you the $http.get deliver it's response.

Tarun Dugar · Accepted Answer · 2015-10-23 10:02:34Z

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.
    }) 
};

Community · Accepted Answer · 2017-05-23 12:16:56Z

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, 2017 at 12:16

CommunityBot

11 silver badge

answered Oct 23, 2015 at 9:56

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

5 Comments

membersound Over a year ago

This also gives me undefined.

Rayon Over a year ago

@membersound, have you assigned climamodel to rootscope ?

membersound Over a year ago

No, just to normale $scope.

Cranio Over a year ago

I would use a service.

Rayon Over a year ago

@Cranio, How about directive ?

bahadir · Accepted Answer · 2015-10-23 10:20:51Z

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;
}]);

Collectives™ on Stack Overflow

How to pass data to a ng-include controller?

5 Answers 5

1 Comment

2 Comments

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related