Question

这是我的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。我做错了什么？

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

Angularjs：在我的指令中添加范围时不工作href

1 个答案: