CODEWITHSUNDEEP
angularjsangularjs-directive
ufk
ufk

Reputation: 32104

using $scope in a directive using angular

I'm trying to create a directive using angular 1.5.0-beta2

I want to use an http request in that directive and to paste the data to the view. usually it's done using $scope but it seems like i can't use $scope in a directive.

this is my code so far:

app.directive('latestDrinks', ['ParseGlobalImageIdService',function (ParseGlobalImageIdService) {
    return {
        restrict: 'E',
        templateUrl: 'views/latest-drinks.html',
        controller: ['$http','$scope', function($http,$scope) {
            $scope.latestDrinksRows =  $http({
                method: 'GET',
                url: 'http://api.myalcoholist.com:8888/cocktail/get_latest_drinks'
            }).then(function successCallback(response) {
                response.data.forEach(function (element, index, array) {
                    element.global_image_id = ParseGlobalImageIdService.thumb(element.global_image_id);
                })
                return response.data;
            }, function errorCallback(response) {
                alert('error');
                return null;
            });
        }],
    }}]);

as you can see in the controller property of the returned object, i try to inject $http and $scope. and using $scope to set latestDrinksRows in order to be able to use it in the view.

the problem that i'm having is that when I try to print the variable in the view 

{{latestDrinksRows}}

i get an empty object.

I checked with chrome inspector and the http request is being sent properly and valid json data is returned.

I also googled a lot and I noticed that no one really tries to extend $scope in the controller property, so I'm guessing i'm missing something.

any information regarding the issue would be greatly appreciated.

Upvotes: 0

Views: 73

Answers (3)

Alexandre
Alexandre

Reputation: 588

Add a scope to your directive :

app.directive('latestDrinks', ['ParseGlobalImageIdService',function (ParseGlobalImageIdService) {
    return {
        restrict: 'E',
        scope: {
             param: '='
        }
        ...
    }}]);

And in your view add the "param" attribute to your element :

<latestDrinks param="myModel"></latestDrinks>

And instead of myModel put your object your want to share with your directive and you add it in your params in your directive function :

controller: ['$http','scope', function($http,scope) {
            $http({
                method: 'GET',
                url: 'http://api.myalcoholist.com:8888/cocktail/get_latest_drinks'
            }).then(function successCallback(response) {
                scope.param = response
            });
        }],

Upvotes: 0

Simon H
Simon H

Reputation: 21005

You are not using $http correctly. At present you are passing a promise to the $scope variable whereas you want to assign the result of the $http call to that variable, which would need something like the following

        $http({
            method: 'GET',
            url: 'http://api.myalcoholist.com:8888/cocktail/get_latest_drinks'
        }).then(function successCallback(response) {
            response.data.forEach(function (element, index, array) {
                element.global_image_id = ParseGlobalImageIdService.thumb(element.global_image_id);
            })
            // ************************
            $scope.latestDrinksRows =  response.data;

        }, function errorCallback(response) {
            alert('error');
            return null;
        });

Upvotes: 4

codemonkey
codemonkey

Reputation: 5267

You're setting your scope variable to the return value of $http, which is just a promise. You need to set the data you want in the .then handler function, which is where you are getting your HTTP response.

Upvotes: 0

Related Questions