AngularJS directive get value from scope

Question

I'm passing my scope object to my directive and this works fine! After a get request I update my scope with a property called project. This contains some values like title, content, etc... If I log this everything is working fine but when I try to log scope.project I get the message undefined, but when I log scope I see the project object in the JSON tree... What can happens here?

All console logs show the correct information but I can't access it...

directive:

.directive('project', ['$http', function ($http) {
    return {
        restrict: 'AEC',
        link: function (scope, element, attrs) {
            console.log(scope); // gives perfect json object including the project object
            console.log(scope.project.content); // gives undefined
        }
    }
}]);

template:

<div showcontent id="createdcontent"></div>

controller: (This is where I set the scope)

$http.get ('/api/projects/' + id)
    .success (function (data) {
        $scope.project = data.project;
    })
    .error (function (data){
        console.log("error: " + data);
    });

Many thanks

Why do you have $http injected in the directive? You are not showing us the full context. Basically you would need to wait till the data is retrieved. — PSL
– PSL, Commented Dec 17, 2014 at 22:16
@blackbird It is a timing issue. Try this way stackoverflow.com/questions/25112239/… — PSL
– PSL, Commented Dec 17, 2014 at 22:25

sgarcia.dev · Accepted Answer · 2014-12-17 22:27:18Z

1

You are doing something asynchronously, and the console.log wont wait for whatever asynchronous task http.get is doing, or when it returns, thus, the console log is being executed before the value of project is changed so it gives undefined. Add a callback to the $http method you are using and then do that console.log, or send a callback with everything you want done when the request is finished. I had this issue a week ago and the problem was that my console.log was getting executed before the variable had been set by the asynchronous method. For example, using your http.get request on the controller, just add the console.log.

$http.get ('/api/projects/' + id)
    .success (function (data) {
        $scope.project = data.project;
        console.log(scope.project.content);
    })
    .error (function (data){
        console.log("error: " + data);
    });

edited Dec 17, 2014 at 22:27

answered Dec 17, 2014 at 22:20

sgarcia.dev

6,22014 gold badges53 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sgarcia.dev Over a year ago

Add the console.log() inside the success callback. Otherwise, your question is more related to methods of knowing when a callback returns so you don't deal with synchronization problems like this.

sgarcia.dev Over a year ago

Also, your Controller shouldn't be doing http related task. Leave that to factories and services. Controllers drive the view, services worry about dealing with business logic(data access) and working with the scope as a best practice.

Collectives™ on Stack Overflow

AngularJS directive get value from scope

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related