javascript - 如何根据变量输入正确重用AngularJS服务和控制器？

Question

我正在使用 json 输入制作一个带有许多小部件的 Angularjs/nvd3 仪表板。我有一个小部件可以工作，但我正在尝试重用 Angular 服务，以根据每个小部件提供的不同 url 返回数据。

我的 Javascript 代码：

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

以及html中的代码：

<div id="container" ng-controller="Widget3Controller" ng-app='nvd3myApp'>
    <nvd3-multi-bar-chart [.......]></nvd3-multi-bar-chart>
</div>

所以我想做的是为每个小部件设置不同的 url（而不是使用 fixedUrl），但我无法让 myApp 的 dataService 获取额外的变量。

我想做一些类似 dataService.getData(someUrl) 的事情，最好甚至对基于一些 html 标记的多个小部件使用相同的控制器。

谢谢你的帮助。

Answer 1

you can use .value simply as you using .service or .controller :

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 :

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(...)

Answer 2

为什么不使用指令？在指令级别定义 URL...

myApp.directive('widget3', function() {
    return {
        scope : {
            url : '@'
        },
        controler: 'Widget3Controller',
        replace: true,
        template :'<div><nvd3-multi-bar-chart [.......]></nvd3-multi-bar-chart></div>'
    }
});

..然后从范围中获取 URL。

myApp.controller('Widget3Controller', function($scope, dataService){
    //Get the data
    dataService.getData($scope.url).then(function(dataResponse) {
        data = dataResponse.somelogictotransformit();