如何使用Angular中具有一个范围值的多个控制器来处理多个组件

时间:2018-02-10 19:36:28

标签: angularjs

我是Angular JS的新手。

我的应用程序有一个模板,其中包含各个控制器的多个包含。这是我的indexTemplate.html,它的控制器是indexController.js

    <!-- MAIN CONTENT -->
    <section class="content">

            <!-- LEFT SIDE -->
            <div class="form-left-side" ng-init="getAllCityStateZip()">

                <!-- Customer info card  -->
                <div ng-controller="customerInfoController" 
                     ng-include src="'views/load/customerInfo.html'"></div>

                <!-- /left side -->
            </div>

            <!-- RIGHT SIDE -->
            <div class="form-right-side">

                <!-- Commodity card -->
                <div  ng-controller="commodityController"  
                     ng-include src="'views/load/commodity.html'"></div>

            <!-- /rightside -->
            </div>
    </section>
    <!-- /.content -->

在索引控制器中,我按API获取数据,如下所示

    $scope.loadData ={};

    //Fetch the Load Data
    loadService.fetchLoad()
        .then(function(data) {
            if (data != null) {
                $scope.loadData = data.body;
                console.log($scope.loadData)
            } 
        }, function(error) {
            var value = error;
        }
    );

在其他控制器中调用此$scope.loadData,例如customerInfoController和commodityController。但我无法在两个控制器中看到加载数据。

我试图在customerInfoController和commodityController中获取loadData对象,它说undefined

    $scope.parent.loadData.id

显示未定义。有人解释如何处理此问题。

我在谷歌搜索过,很多用户都建议Promise,因为我有多个控制器,不确定我是否可以使用promise获得解决方案。由于我是Angular的新手,我可能错了。寻找建议。

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您有多个控制器,但您想要访问所有控制器中的数据。

最简单的解决方案是创建一个从API获取数据并将其存储在服务中的服务。然后,您将服务注入每个控制器并从服务中获取数据。

这是一个简单的例子:

HISTFILE

然后在每个控制器中,您只需注入您的服务并致电app.service('dataService', function() { var serviceData; this.fetchData= function () { loadService.fetchLoad() .then(function(data) { if (data != null) { serviceData = data.body; } }, function(error) { var value = error; } ); } this.getData = function(){ return serviceData} });

getData

确保在$scope.data = dataService.getData(); 之前调用fetchData。您可能无法使用承诺,但在调用getData之前,您很可能需要使用承诺来确保fetchData已完成。