0

这是我的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>

我的指令：

'use strict';

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

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

当我刷新页面时，href="#modal{{screencast.id}}"我只有href="#modal". 当我scope: { url: '='}从指令中删除时，它工作正常，并且href具有screencast.id. 我做错了什么？

4

1 回答 1

1

在这种情况下，我将假设您发布的 HTML 片段放置在 ng-video 元素中（从您的消息中不清楚，但您所描述的似乎表明了这一点）。

当您添加scope: { url: '='}到指令时，您创建了一个隔离范围，这意味着创建了一个新范围，并且该指令中的所有元素都将存在于这个新范围内，与父范围断开连接。在这种情况下，{{screencast.id}}如果它位于父范围内，您的绑定将无法访问截屏对象。

我认为对于您的情况，最好的解决方案是删除scope: { url: '='}，因为您仅使用它来读取单个属性并改用attrs参数。

您的链接功能可能如下所示：

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);
        }
    });
}
于 2013-08-06T14:46:10.927 回答