$ scope.param无法通过函数识别($scope.param cannot be identified by function)

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

我还有另一个js文件作为follwos：

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中它是未定义的我可以在这两个函数之间分享参数的方式吗？

I have a script in script.js as follows:

Also I have another js file as follwos:

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

});

Also my html code is as follows:

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

Now what I am trying to do is to first call generate by button b1 to create param then I will call addchart to draw the chart by buton b2 but when I do this the param inside generate gets created but it is undefined in addchart is there any way that I can share the param in between these 2 functions?

最满意答案

DEMO

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

首先，每个控制器应仅用于特定模板，不应将控制器用于多个模板，它应严格控制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; });

请参阅我的演示以查看整个代码及其工作原理

DEMO

Ok, so basically, you want your two controllers talk to each other. While your code may work the way you are doing it now, it will spawn a lot of problems in the future. So here's the better way I know to do things in angular.

First, every controller should only be used for a specific template, you should not use controllers for multiple template it should be strictly 1 controller for 1 template.

Now, for you to share an object to multiple controllers, you need to create a service to be shared by those controllers.

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

Please see my demo to see the whole code and how it works

更多推荐