Question

我在script.js中有一个脚本如下：

var app = angular.module("myModule", []);
app.controller('highchart', function($scope, chart) {

$scope.addchart = function() {
    console.log($scope.param);// print undefined !!!!!!!!!!!!!!!!!!!!!!!!
    chart.addChartToUI($scope.param);
}

$scope.generate = function() {

    $scope.param=[];
    for (var i = 0; i < 12; i++) {
        $scope.param[i] = Math.random();
    }
    console.log($scope.param);// print some number
}
});

我还有另一个js文件，如下：

app.factory('chart', function() {
return {
    addChartToUI : function(paramsArr) {
        return Highcharts.chart('container', {

            xAxis : {
                categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
            },

            series : [ {
                data : paramsArr
            } ]
        });
    }
};

}）;

我的html代码如下：

<html>
<head>
< Script src="javascript/angular.js">

</Script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<Script src="javascript/script.js"></Script>
  <script src="javascript/chartUtil.js"></script>

   </Script>
    <title>Insert title here</title>
   </head>
   <body ng-app="myModule">

    <div ng-controller="highchart">
    <button id="b1" type="button" ng-click="generate()"      title="sssss">dddddddd</button>
</div>
</br>
</br>
</br>
 <div ng-controller="highchart">
    <button id="b2" type="button" ng-click="addchart()" />
    </br> </br>
    <div id="container">Placeholder for chart</div>

</div>

现在我要做的是首先通过按钮b1调用generate来创建param然后我将调用addchart来通过buton b2绘制图表但是当我这样做时，生成的param会被创建但是在addchart中是未定义的有什么方法可以在这两个函数之间共享参数吗？

Answer 1

DEMO

好的，基本上，你希望你的两个控制器互相交谈。虽然您的代码可能会按照您现在的方式运行，但它将来会产生很多问题。所以这是我知道以角度做事的更好方式。

首先，每个控制器只应用于特定的模板，不应该将控制器用于多个模板，它应该是1个模板的1个控制器。

现在，为了将对象共享到多个控制器，您需要创建一个由这些控制器共享的服务。

app.service('sharedService',function(){

  this.array = [];

});

app.controller('MainController', function(sharedService){

  sharedService.array = [1,2,3,4];

});

app.controller('AnotherController', function(sharedService){

  this.array = sharedService.array;

});

请参阅我的演示，了解整个代码及其工作原理

Answer 2

您的代码在设置范围时看起来很好。你能告诉我你调用函数的代码吗？我怀疑你可能以错误的顺序或异步调用它，这意味着在生成完成之前调用addchart。

试试这个：

app.controller('highchart', function($scope, chart) {

for (var i = 0; i < 12; i++) {
        $scope.param[i] = Math.random();
    }
    console.log($scope.param);// print some number

$scope.addchart = function() {
    console.log($scope.param);// print undefined !!!!!!!!!!!!!!!!!!!
    chart.addChartToUI($scope.param);
}
});

如果这样可行，那么您可以确定范围设置正确但是呼叫的时间是错误的。

$ scope.param无法通过函数识别

2 个答案: