Как передать данные контроллеру ng-include?

Question

У меня есть элемент html ng-include, и вы хотите передать некоторые данные извне в контроллер.

Основной controllerfetchesjsondata из http webservice, и извлекает данные в Scoped переменной climadata.

Ниже pseudocode, но вы получите идею:

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> 

Это прекрасно работает, НО climadata никогда не достигает climaController. Проверено следующим образом:

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

Климамодель всегда не определена в консоли, но почему?

Answer 1

Это работает, причина, вы получение undefined потому, что вы получите данные по $http запросу, из-за того, что , прежде чем вы получите данные climaController, то в этот момент не будет вызова переменной области climadata.

проверить это DEMO

вы можете увидеть консоль печати undefined, но вы получите данные о частичной HTML странице после того, как данные доступны после запроса Ajax.

Если вы хотите загрузить inclcude после Аякса завершения затем использовать ng-if

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

если climadata присутствует, то только этот процесс DIV означает, что include работает только если climadata доступен.

DEMO

и вы можете аннулирование от onload="climamodel = climadata"

Answer 2

• Прежде всего, необходимо изменить onload к ng-load или ng-init. потому что onload не может прочитать угловые свойства.

• Вы можете использовать $rootScope, Это помогает передавать значение от контроллера к другому контроллеру.

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

Кроме того, некоторые другие детали, вы можете получить здесь: AngularJS: How can I pass variables between controllers?

Answer 3

Попробуйте это:

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> 

Answer 4

Я думаю, что лучше всего было бы использовать $broadcast

Это, по сути, служба для распространения событий на дочерние области (чтение: дочерние контроллеры). Контроллеры-дочерние устройства прослушивают событие $broadcast, используя услугу $on.

Вот как вы можете его реализовать. В вашей 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. 
    ); 
} 

В вашей 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. 
    }) 
}; 

Answer 5

я думаю, что обмен данных через наследование области видимости создает код спагетти. Вы должны проверить свой код и шаблон, чтобы понять, что происходит.

Для вашей проблемы я бы создал службу, которая будет загружать и кэшировать данные. Эта услуга может быть введена для обоих контроллеров.

здесь приведен пример код

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