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: '='}すると、isolate スコープが作成されます。つまり、新しいスコープが作成され、このディレクティブ内のすべての要素がこの新しいスコープ内に存在し、親スコープから切り離されます。その場合、{{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 に答える