Angularjs: not working href when add scope to my directive - href

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?

Answer 1

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);
}
});
}