Angular: my isolated attribute not binding in simple directive

Question

I am using this tutorial to understand how to display an image using directives with an isolate scope. What am i missing to get the attribute to bind? In my ide, I can output the image but the directive is not working. The fiddle displays nothing :-(

Fiddle:http://jsfiddle.net/gogirl/Stm3j/

This is outputted in my program:

 output:{{photo.url}}
<img ng-src='http://www.w3schools.com/js/pic_bulboff.gif' />

This is not outputted:

 <my-d photo-src={{photo.url}} ></my-d>

Chen-Tsu: the reason I believe that no controller is needed is that there is no change in state. The init directive is enough to pass on the data. — scalaGirl
– scalaGirl, Commented Feb 11, 2014 at 19:32

a-d · Accepted Answer · 2014-02-11 18:45:46Z

2

You have residual data in your jsfiddle configuration

Here is what I did to make it work

Remove the external resources because you use angular 1.0.1 with angular 1.2.1
Remove in options panel the body tag myModule
Remove the call of the undefined variable app and query it with angular.module

jsfiddle updated here

// My Main Application File
angular.module('myApp', ['myDirectives']);

// My Directives File
angular.module('myDirectives', []);

// Controller One File
angular.module('myDirectives', []).directive('myD', function () {
    return {
        restrict: 'E',
        template: '<figure> <img ng-src="{{photoSrc}}"/> </figure>',
        replace: true,
        // pass these two names from attrs into the template scope
        scope: {
            photoSrc: '@'
        }
    }
})

answered Feb 11, 2014 at 18:45

a-d

10.9k2 gold badges34 silver badges50 bronze badges

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

2 Comments

scalaGirl Over a year ago

Merci Aduch. As you can see our answers crossed but am so happy that I can use chaining again.

a-d Over a year ago

Yes it is sometimes hard to work on several versions of a configuration, step back the go forth again leaving some traces ;)

scalaGirl · Accepted Answer · 2014-02-11 19:38:27Z

Working Examle

All is working fine now when i switched the original module chaining method with the global app method:

   var app = angular.module("myApp", []);
       app.directive('myD', function() {
           return {
               restrict: 'E',
               template: '<figure> <img ng-src="{{photoSrc}}"/> </figure>',
               replace: true,
               // pass this name from attrs into the template scope
               scope: {
                   photoSrc: '@'
               }
       }
    });

But I wont be a happy camper until I figure out what is wrong with the chaining declaration as it works fine elsewhere. Any takers? Fiddle still not working so i think it may be an issue with it being a fiddle. EDIT: WORKS fine also with chaining method..One baby step at a time :-)

Collectives™ on Stack Overflow

Angular: my isolated attribute not binding in simple directive

2 Answers 2

Here is what I did to make it work

jsfiddle updated here

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Here is what I did to make it work

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related