Call the same $http.get() in 2 different directives using AngularJS

Question

I am using AngularJS and D3.JS

I have an html form with the following:

    <div simple-chart chart-data="lineData"></div>

This is hooked up to a directive like so:

mist.directive("simpleChart", function($window, $http){
    return{
        restrict: "EA",
        template: "<svg width='750' height='200'></svg>",
        link: function(scope, elem, attrs){
            function drawLineChart() {
                //initilize the line chart
            }
            $http.get("myurl")
            .success(function(data, status, headers, config){
                drawLineChart();
            })
        }}
  });

1. Is it possible to create another directive using the data from $http.get("myurl") without having to call it again?
2. Is is possible to make $http.get("myurl") common so that it can be called by different directives?
3. Can I use something like this? Can't get correct return value from an jQuery Ajax call

Answer 1

您可以将http调用包装到服务中，并使用诸如angular-cache之类的东西来缓存来自服务器的响应。

Answer 2

You can create a service which returns $http.get('myurl') and add it as a dependency in your directive.

mist.factory('dataService', function ($http) {
    var dataService= {};
    dataService.getData = function(){
       return $http.get('myurl');
    }
    return dataService;

});

mist.directive("simpleChart", function($window, dataService){
return{
    restrict: "EA",
    template: "<svg width='750' height='200'></svg>",
    link: function(scope, elem, attrs){
        function drawLineChart() {
            //initilize the line chart
        }
        dataService.getData()
        .success(function(data, status, headers, config){
            drawLineChart();
        })
    }}
});

Answer 3

Since I'm using AngularJS1.3, I needed to use

            mist.factory('dataService', function ($http) {
            return {
                getData: function () {
                    //since $http.get returns a promise,
                    //and promise.then() also returns a promise
                    //that resolves to whatever value is returned in it's
                    //callback argument, we can return that.
                    return $http.get('http://url.com').then(function (result) {
                        return result.data;
                    });
                }
            };
        });

        mist.directive("simpleChart", function ($window, dataService) {
            return{
                restrict: "EA",
                template: "<svg width='750' height='200'></svg>",
                link: function (scope, elem, attrs) {
                    function drawLineChart() {
                        //initilize the line chart
                    }
                    dataService.getData().then(
                            function (data) {
                                drawLineChart();
                            },
                            function (err) {
                                console.log("Sorry we encountered an error " + err);
                            }
                    );
                }};
        });

SOURCE: http://www.benlesh.com/2013/02/angularjs-creating-service-with-http.html