Passing literal attribute values to angular js directive

Question

I'm having a bit of trouble understanding how attribute values work in AngularJS directives. No matter what I try, literal attribute values come out as undefined when I try to use them within the directive controller.

Say in my HTML I envoke a directive like this:

<div ng-controller="MyCtrl">
    <my-directive reference-attr='referenceVal' literal-attr='literalVal'></my-directive>
</div>

referenceVal and literalVal are both defined in my controller, like this:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.referenceVal = 'This was passed by reference';
    $scope.literalVal = 'This was also passed by reference, but should have been literal';
}

And I try to pick them up in my directive:

myApp.directive("myDirective", function () {

    return {
        restrict: "E",
        replace: true,
        scope: {
            referenceAttr: "=",
            literalAttr: "@"
        },
        template: '<div><p>Reference:{{referenceAttr}}</p><p>Literal:{{literalAttr}}</p></div>',
        controller: function ($scope) {
            alert("ref: " + $scope.referenceAttr + ", lit: " + $scope.literalAttr);
        }
    };
});

The output looks fine:

Reference: This was passed by reference
Literal: literalVal

But the alert message is crap:

ref: This was passed by reference, lit: undefined

You can try it out yourself with this JSFiddle

Any idea why literalAttr is undefined in the directive scope at this point?

Ancient Angular versions, like 1.0.1 used in the Fiddle had some problems (?) with interpolated directive attributes. Recent versions exhibit the expected behaviour. See forked fiddle — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Jan 30, 2014 at 8:28
Ah, thanks Nikos, a newer version of Angular JS fixes it (d'oh). Do you want to make this an answer and I'll accept it? — Dave
– Dave, Commented Jan 30, 2014 at 23:58

Nikos Paraskevopoulos · Accepted Answer · 2014-01-31 11:31:10Z

3

This is a problem with the oldest versions of Angular, e.g. the 1.0.1 used in the fiddle. Recent versions exhibit the expected behaviour.

answered Jan 31, 2014 at 11:31

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Passing literal attribute values to angular js directive

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related