Angularjs directive doesn't get data

Question

I have service which gets data from server and sends it to controller:

Service:

publicApp.angularModule.factory('resultService', function ($http) {
        return {
            getResult: function() {
                return $http.get("/Result/GetResult")
                    .success(function(result) {
                        return result.data;
                    }).error(function(result) {
                        console.log("error" + result);
                    });
            },
        };
    });

Controller:

publicApp.angularModule.controller('PublicResultCtrl', function ($scope, $location, resultService) {

    resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

    var addDataToGraph = function (num, text) {
        return {
            y: num,
            legendText: text,
        };
    };

});

And I have directive which should get data from controller. I call directive like this:

<div id="graph" style="width: 200px; height: 200px" canvasjs graphData="graph"></div>

And here is my directive:

publicApp.angularModule.directive('canvasjs', function () {


    return {
        restrict: 'A',
        scope: {data : '=graphData'} ,
        link: function (scope, element, attrs) {

            scope.$watch('data', function (data) {
                    console.log(scope.data);

            });         
        }
    };
});

But scope.data is undefined. I know that $http.get is async operation but shouldn't scope.$watch get updates ?

Maxim Shoustin · Accepted Answer · 2013-10-22 15:54:48Z

Try to pass value to directive as: canvasjs="graph".

In my example I simulate response from service and return promise.

HTML

<div ng-controller="fessCntrl">
    <div id="graph" style="width: 200px; height: 200px" canvasjs="graph"></div>
    <pre>   graph:  {{graph|json}}  </pre>
    <pre>   data:  {{data|json}}  </pre>  
</div>

JS

var fessmodule = angular.module('myModule', ['ngResource']);

fessmodule.controller('fessCntrl', function ($scope, resultService) {

    resultService.getResult().then(function (resultResponse) {
        console.log(resultResponse);

        $scope.data = resultResponse.data;
        $scope.graph = [];

        angular.forEach($scope.data.TreningExerciseScores, function (item, key) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });


    });

    var addDataToGraph = function (num, text) {
        return {
            y: num,
            legendText: text,
        };
    };

});

fessmodule.$inject = ['$scope', 'Data'];

fessmodule.directive('canvasjs', function () {
    return {
        restrict: 'A',

        link: function (scope, element, attrs) {

            scope.$watch('data', function (data) {
                console.log("fff", scope.data);

            });
        }
    };
});

fessmodule.factory('resultService', ['$resource', '$q', function ($resource, $q) {
    var input = {
        data: {
            TreningExerciseScores: [{
                Item1: "aaa"
            },
            {
                Item2: "bbb"
            }]
        }
    };

    var factory = {
        getResult: function (selectedSubject) {
            var deferred = $q.defer();

            deferred.resolve(input);

            return deferred.promise;
        }

    }
    return factory;
}]);

Demo Fiddle

Davin Tryon · Accepted Answer · 2013-10-22 15:44:03Z

2

If you are going to handle the promise in your controller:

resultService.getResult().then(function (resultResponse) {
        $scope.data = resultResponse.data;
        $scope.graph = [];

        _.forEach($scope.data.TreningExerciseScores, function(item) {
            $scope.graph.push(addDataToGraph(item.Item2, item.Item1));
        });

    });

There is no need to handle it in your service:

getResult: function() {
                return $http.get("/Result/GetResult");
            },

If you want to handle only the error in the service then you need to wrap in a promise again. You can use $q.when for this:

getResult: function() {
                return $http.get("/Result/GetResult")
                    .success(function(result) {
                        return $q.when(result.data);
                    }).error(function(result) {
                        // not sure what you want to do here
                        console.log("error" + result);
                        return $q.when(result);

                    });
            },

$q.when will wrap a promise around the object if it is not already a promise.

answered Oct 22, 2013 at 15:44

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

6 Comments

hyperN Over a year ago

Thanks for the suggestions, I've changed my code according to them, but still scope.data is undefined

Davin Tryon Over a year ago

Maybe you need to return $q.when(result) and not result.data. Otherwise, you are doing a result.data.data.

hyperN Over a year ago

I've logged $scope.graph and everything was fine there so it's not problem with my service, I believe problem is in directive

Davin Tryon Over a year ago

Where are you logging? Try logging result in your resultService and your controller. See if you can see the data property on both.

hyperN Over a year ago

You were right result.data in resultService was undefined, and result was object, and in controller was everything ok

|

Jonathan Rowny · Accepted Answer · 2013-10-22 15:44:04Z

0

You can't return the data in a success() handler and expect it to make it back. You have to chain another promise (return defer.promise()), or do the success in your controller and modify the $scope in your result. Or just return the whole $http call which is already a promise.

answered Oct 22, 2013 at 15:44

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angularjs directive doesn't get data

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related