[英]How to correctly reuse AngularJS services and controllers based on variables input?
I'm making an Angularjs/nvd3 dashboard with a number of widgets using json input. 我正在使用json输入制作带有许多小部件的Angularjs / nvd3仪表板。 I've got a widget to work, but what I'm trying is to reuse an Angular service to return data based on a different url provided per widget.
我有一个小部件可以工作,但是我想要的是重用Angular服务以根据每个小部件提供的不同URL返回数据。
My code in Javascript: 我的Java代码:
var fixedUrl = "http://static_url/data.json";
var myApp = angular.module("nvd3myApp", ['nvd3ChartDirectives']);
myApp.service('dataService', function($http) {
this.getData = function(callbackFunc) {
return $http.get(fixedUrl);
}
});
myApp.controller('Widget3Controller', function($scope, dataService){
//Get the data
dataService.getData().then(function(dataResponse) {
data = dataResponse.somelogictotransformit();
eval
$scope.exampleData = [
{
"key" : "Widget title",
"color" : "#1f77b4",
"values": data
},
];
$scope.xAxisTickFormatFunction = function(){
return function(d){
return d3.time.format('%H:%M')(new Date(d));
}
}
$scope.yAxisTickFormatFunction = function(){
return function(d){
return d3.format(',d')(d);
}
}
});
});
And the code in the html: 以及html中的代码:
<div id="container" ng-controller="Widget3Controller" ng-app='nvd3myApp'>
<nvd3-multi-bar-chart [.......]></nvd3-multi-bar-chart>
</div>
So what I'd like to do is to have a different url (instead of using fixedUrl) per widget, but I'm unable to have myApp's dataService to take an extra variable. 所以我想做的是每个小部件都有一个不同的url(而不是使用fixedUrl),但是我无法让myApp的dataService接受一个额外的变量。
I'd like to do something like dataService.getData(someUrl), and preferably even use the same controller for multiple widgets based on some html tag. 我想做类似dataService.getData(someUrl)的事情,最好甚至基于多个html标签对多个小部件使用相同的控制器。
Thanks for any help. 谢谢你的帮助。
you can use .value simply as you using .service or .controller : 您可以像使用.service或.controller一样简单地使用.value:
myApp.value('url', 'http://static_url/data.json');
and then inject it in your controller/service 然后将其注入您的控制器/服务
myApp.service('dataService', ['url', function($http) {
this.getData = function(callbackFunc) {
return $http.get(url);
}
}]);
this value can be overrided - just redifine it. 可以覆盖此值-只需重新定义即可。
another way - to write .factory with some parameters (for url creating) and then return url string, and also inject it in your .service or simply throw params in your .service like that : 另一种方法-编写带有一些参数的.factory(用于url创建),然后返回url字符串,然后将其注入.service或像这样简单地将参数添加到.service中:
myApp.service('dataService', function($http){
return ({
getData/*public*/:getData /*private*/
})
function getData(urlPath1, urlPath2){
var url = "http://" + urlPath1 + urlPath2 + "/data.json";
return $http.get(url);
}
}
//inside controller :
dataService.getData(static_url, static_urlPart2).then(...)
Why don't you use a directive? 为什么不使用指令? Define the URL on the directive level...
在指令级别定义URL ...
myApp.directive('widget3', function() {
return {
scope : {
url : '@'
},
controler: 'Widget3Controller',
replace: true,
template :'<div><nvd3-multi-bar-chart [.......]></nvd3-multi-bar-chart></div>'
}
});
..and then get the URL form the scope. ..然后从范围获取URL。
myApp.controller('Widget3Controller', function($scope, dataService){
//Get the data
dataService.getData($scope.url).then(function(dataResponse) {
data = dataResponse.somelogictotransformit();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.