Scope object is undefined in Angular directive

Question

I am trying to understand this behaviour, and have added simplified code of what I'm trying to do. In an HTML partial for a modal using a modal controller I have some code like this:

<form>
        <!--  example one   -->
        <div read-field="{{ singleContact._id }}" ></div>
        <h2>{{ singeContact._id }}</h2>

        <!-- example two -->
        <div read-field="{{ someScope }}"></div>

</form>

and the directive:

angular.module('myApp')
.directive('readField', function () {
    return {
        link: function (scope, element, attrs) {
            console.log(attrs); // outputs correct object with attrs.readField "523c2..mongo_id.."
            console.log(attrs.readField); // outputs and empty string
        }
    };
});

Even though the singleContact._id value is rendered correctly on the page in the h2, and appears correctly in the object returned by logging just the (attrs), logging the variable attrs.readField directly returns an empty string. Doing the same thing in example two with someScope and everything works fine, ie a console.log of attrs.someScope returns 'Foo' as it should.

Obviously then it is a problem with how they are setup in the controller: with example one (singleContact) coming from a function call to an api service, and example two (someScope) being a straight declaration.

angular.module('myApp')
.controller('EditModalCtrl', function ($scope, $modalInstance, $rootScope, apiCalls, id) {

    apiCalls.getContact(id)
        .success(function (data) {
            console.log(data);
            $scope.singleContact = data;
        });

    $scope.someScope = 'Foo';

});

Any help in making me understand this would be much appreciated, I am new to angular, and have the feeling I'm missing something important here, thanks.

A question/guess: `console.log(attrs)` is writing something in the console. *Then* you click on that something, and the `readField` is expanded properly. My *guess* is that when the directive runs, the service has *not* yet returned, thus `attrs.readField` is empty. In the time between appearing in the console and you clicking it, the service has returned, so clicking-expanding the object produces the right results. — Nikos Paraskevopoulos, Oct 02 '14 at 07:28
Well what really threw me off was that the correct info was right there in the console, so this makes sense. Didn't think of the time it takes to view the object. Have a direction to look in, thanks. — brenit0, Oct 02 '14 at 08:00

Fordio · Answer 1 · 2014-10-02T07:50:12.540

singleContact._id is not bound to the attribute at the point your link function runs, so an empty string is being passed as the readField value. Try this approach instead:

<form>
    <div read-field="singleContact._id" ></div>
    <h2>{{ singeContact._id }}</h2>
</form>

angular.module('myApp')
.directive('readField', function () {
    return {
        link: function (scope, element, attrs) {
            console.log(attrs); // outputs correct object with attrs.readField "523c2..mongo_id.."
            console.log(scope.$eval(attrs.readField)); // should evaluate the expression on the current scope
        }
    };
});

Scope object is undefined in Angular directive

1 Answers1