0

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>

したがって、ウィジェットごとに (fixedUrl を使用する代わりに) 別の URL を使用したいのですが、myApp の dataService に追加の変数を持たせることができません。

私は dataService.getData(someUrl) のようなことをしたいと思います。できれば、いくつかの html タグに基づいて複数のウィジェットに同じコントローラーを使用することもできます。

助けてくれてありがとう。

4

2 に答える 2

0

.value は、.service または .controller を使用するのと同じように簡単に使用できます。

myApp.value('url', 'http://static_url/data.json');

次に、コントローラー/サービスに挿入します

myApp.service('dataService', ['url', function($http) {
    this.getData = function(callbackFunc) {
        return $http.get(url);
    }
}]);

この値は上書きできます - 再定義するだけです。

別の方法 - .factory にいくつかのパラメーター (URL 作成用) を記述してから、URL 文字列を返し、それを .service に挿入するか、単純に .service に params をそのようにスローします。

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(...)
于 2015-04-23T10:03:11.727 に答える
0

ディレクティブを使用しないのはなぜですか。ディレクティブ レベルで 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();
于 2015-04-23T11:09:58.110 に答える