javascript - How to pass data to a ng-include controller? - Stack Overflow

admin管理员组

文章数量:1334342

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?

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?

• javascript
• html
• angularjs

Share Improve this question Follow edited Oct 23, 2015 at 10:00 Kalhan.Toress 21.9k88 gold badges7171 silver badges9696 bronze badges asked Oct 23, 2015 at 9:49 membersoundmembersound 87k218218 gold badges675675 silver badges1.2k1.2k bronze badges 7

• 1 You can use service to share the data.. – Rayon Commented Oct 23, 2015 at 9:51
• Isn't is possible without introducing a service for just handing the modeldata back and forth? – membersound Commented Oct 23, 2015 at 9:52
• 1 normaly, you don't to do anything to get climamodel from the mainController because it's the controller parent of climateController. – hic1086 Commented Oct 23, 2015 at 9:55
• angular version? this should work – Kalhan.Toress Commented Oct 23, 2015 at 9:58
• Possible duplicate of AngularJS : How can I pass variables between controllers? – Ramesh Rajendran Commented Oct 23, 2015 at 10:00

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 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 plete 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"

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>

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

• 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?

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

本文标签： javascriptHow to pass data to a nginclude controllerStack Overflow