Question

我有一个ng-include html元素，并希望将一些数据从外部传递给控制器。

来自controller的主fetches json data http webservice，并将数据提取到范围变量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>

这很好用，但气候数据永远不会达到climaController。检查如下：

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

在控制台中始终未定义climamodel，但为什么？

Answer 1

这是有效的，您获得undefined的原因是，您通过$http请求获取数据，因此，在您获取数据climaController之前，将执行那一点没有范围变量调用climadata。

检查此DEMO

您可以看到控制台正在打印undefined，但在ajax请求之后数据可用后，您将获得部分HTML页面上的数据。

如果您想在ajax完成后加载inclcude，请使用ng-if

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

如果存在climadata，那么仅当include表示climadata时，此div工作才有效。

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

如何将数据传递给ng-include控制器？

5 个答案: