Angularjs not picking up data-src

Question

For some reason Angular isn't catching my data-src

When I do this:

<div foo data-src="{{ my_url }}"></div>

I get back nothing. However, it works when I manually type it: i.e

<div foo data-src="blah"></div>

What am I doing wrong here?

More of my code:

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

foo.directive('foo', function ($document, $rootScope, $http, $resource) {

return {
      restrict: 'A',
      scope: true,
      link: function (scope, elem, attrs) {
        console.log(attrs.src)
      }
  });

My guess is that angular evaluates your data-src before it evaluates {{ my_url }} — Tom
– Tom, Commented Feb 20, 2014 at 22:44
@Tom Yes, I'm pretty sure this is the problem. Would you happen to know a fix? — goo
– goo, Commented Feb 20, 2014 at 22:46
Shouldn't that be data-ng-src? The browser evaluates the source before angular replaces the content. You can use ng-src or data-ng-src, that should work, but it will send two requests: one invalid without the placeholder filled in, then the correct one. — mnemosyn
– mnemosyn, Commented Feb 20, 2014 at 22:52

Sunil D. · Accepted Answer · 2014-02-20 23:07:39Z

1

[Edit]

I forgot to use camelCase for the attribute name when calling attrs.$observe(). Also, it looks like you do need to use ng-data-source). Correction made below...

You want to use attrs.$observe() in the link function for your directive. Angular will watch the attribute and execute a callback so the directive can be notified when the value of the interpolated expression changes.

Here's a link to a fiddle created by Mark Rajcok that demonstrates it. And a link to the documentation as well.

Finally, here is some sample code using your directive:

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

foo.directive('foo', function ($document, $rootScope, $http, $resource) {

return {
      restrict: 'A',
      scope: true,
      link: function (scope, elem, attrs) {
        attrs.$observe('ngDataSrc', function(newValue) {
          console.log('interpolated value', newValue);
        }
      }
  });

edited Feb 20, 2014 at 23:07

answered Feb 20, 2014 at 22:56

Sunil D.

18.2k6 gold badges55 silver badges69 bronze badges

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

2 Comments

Sunil D. Over a year ago

The documentation says it will call the callback immediately (on the next $digest) when you do the $observe, and then anytime the value changes. Is the value undefined the first time? If so, maybe you can just ignore that the first time...

goo Over a year ago

Thank you. I ended up doing this if (newValue != undefined)

Collectives™ on Stack Overflow

Angularjs not picking up data-src

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related