Unable to access AngularJS attribute in directive

Question

I'm currently trying to implement a very simple directive in AngularJS. In the end, I want to be able to use the directive like this:

<share-buttons url="google.com"></share-buttons>

My directive looks like this (coffee script):

module.directive 'shareButtons', () ->


    controller = ['$scope', ($scope) ->

        $scope.share = () ->
            console.log $scope.url

    ]

    return {
        restrict: 'EA'
        scope: {
            url: '=url'
        }
        templateUrl: viewpath_common('/directives/share-buttons')
        controller: controller
    }

And here's my template (Jade):

.social-icons
    button.btn.btn-li(ng-click="share()")
        i.fa.fa-linkedin.fa-fw

When I click the button, the correct function is called ($scope.share), but the only thing logged is undefined.

Can you help me?

SoluableNonagon · Accepted Answer · 2015-04-01 15:38:28Z

1

its because your url attribute is two way data bound with "="

so it's looking for a scope variable like this:

$scope.google.com =  // should be some value.

to be passed from the controller to the directive.

If you want a string to be passed, use "@" for one way binding

scope: {
        url: '@'
}

Note: you can also access it via attributes in the link function of the directive (which you don't have above)

// like so
restrict: 'EA'
scope: {
    url: '@'
}
templateUrl: "someURL",
link: function(scope, elem, attrs) {
    console.log(attrs.url);
}

edited Apr 1, 2015 at 15:38

answered Apr 1, 2015 at 15:33

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

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

Collectives™ on Stack Overflow

Unable to access AngularJS attribute in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related