Angularjs: not working href when add scope to my directive

Question

Here is my html:

 <a href="#modal{{screencast.id}}"  role="button" class=" btn" data-toggle="modal"
           ng-click="fetch_comments(screencast.id)" ng-video  url="match_url(screencast.video_url)">Play</a>

My directive:

'use strict';

App.directive('ngVideo', [function () {
return {
    restrict: 'A',
    scope: { url: '='},

    link: function (scope, elem, attrs) {
        elem.bind('click', function () {
            console.log(scope.url);
        });
    }
    }
}]);

When I refresh page in href="#modal{{screencast.id}}" i have only href="#modal". When I remove scope: { url: '='} from directive it works fine, and href has value of screencast.id. What i'm doing wrong?

Yann · Accepted Answer · 2013-08-06 14:46:10Z

I am going to assume the HTML snippet you posted is placed inside an ng-video element in that case (it is not clear from your message but what you describes seems to indicate this).

When you add scope: { url: '='} to your directive, you create an isolate scope, which means a new scope is created and all the elements inside this directive will live inside this new scope, disconnected from the parent scope. In that case, your {{screencast.id}} binding won't be able to access the screencast object if it was located in the parent scope.

I think for your situation, the best solution would be to remove scope: { url: '='} since you are only using it to read a single attribute and use the attrs parameter instead.

Your link function could look like:

link: function (scope, elem, attrs) {
    var urlAttr;
    //watch url attribute (we have to wait for the binding to be evaluated, hence the $observe)
    attrs.$observe('ngModel', function(value) {
        urlAttr = value;
    });
    elem.bind('click', function () {
        if(urlAttr){
            console.log(urlAttr);
        }
    });
}

Collectives™ on Stack Overflow

Angularjs: not working href when add scope to my 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