指令のリンク関数に渡された要素の高さと幅をAngularjsで求める方法

Question

'link'関数に渡される要素の高さや幅が見つかりません。要素に追加された画像上でマウスのクリック位置を計算したいからです。 offsetHeight、offsetWidth、clientHeight、およびclientWidthはすべて定義されていないため、位置はxとyです。 getBoundingClientRectは「関数ではない」エラーをスローします。テンプレートの高さと幅の属性を設定しても何も変わりません。ここで

は、問題を示し、単純なディレクティブです：

//OLD 
var ngnDirectives = angular.module('ngnDirectives'); 

ngnDirectives.directive('positionTest', function() { 

    function link(scope, element, attrs) { 


    console.log("POSITION"); 
    var position = element.position(); 
    for(p in position) { 
     console.log(p + ", " + element[p]); 
    } 
    console.log("END POSITION"); 
    var offset = element.offset(); 
    console.log("element.offset x, y: " + offset.left + ", " + offset.top); 
    console.log("offsetWidth, offsetHeight: " + element.offsetWidth + ", " + element.offsetHeight); 
    console.log("clientWidth, clientHeight: " + element.clientWidth + ", " + element.clientHeight); 
    //get BoundingClientRect throws 'not a function' error 
    console.log("getBoundingClientRect: " + element.getBoundingClientRect()); 

    } 
    return { 
     scope: {}, 
     restrict: 'E', 
     template: '<div></div>', 
     link: link 

    }; 
}); 

UPDATE

element[0]は、生のDOM要素であるとのコメントを取得した後、私はそのoffsetWidth、offsetHeight、clientWidthを見つけましたclientHeightは私が理解している値をまだ返していません。 getBoundingClientRectを使用するようにコードを変更し、図の正しい「ボトム」を返さないことがわかりました。ここにコードがあります：

//NEW 
var ngnDirectives = angular.module('ngnDirectives'); 

ngnDirectives.directive('positionTest', function() { 

    function link(scope, element, attrs) { 


    var bcr = element[0].getBoundingClientRect(); 
    console.log("bcr before css. left, right, top, bottom: " + bcr.left + ", " + bcr.right + ", " + bcr.top + ", " + bcr.bottom); 


    element.css("height", 217); 
    element.css("width", 217); 


    bcr = element[0].getBoundingClientRect(); 
    console.log("bcr after css. left, right, top, bottom: " + bcr.left + ", " + bcr.right + ", " + bcr.top + ", " + bcr.bottom); 


    console.log("offsetWidth, offsetHeight: " + element[0].offsetWidth + ", " + element[0].offsetHeight); 
    console.log("clientWidth, clientHeight: " + element[0].clientWidth + ", " + element[0].clientHeight); 

    } 
    return { 
     scope: {}, 
     restrict: 'E', 
     template: '<div></div>', 
     link: link 

    }; 
}); 

Answer 1

問題は、正しい要素から高さと幅が得られなかったことでした。リンク関数を入力すると、要素にsvgタグが追加されます。 svgタグは幅と高さを持ち、そのタグでgetClientBoundingRectを使用すると機能します。しかし、要素[0]は、ディレクティブの 'template：'定義（空のdiv）に由来するタグです。

私はおそらく修正する可能性がSVGタグの文字列リテラル表現を表示中要素結果をSVGタグを追加は

>...<div></div><svg>...</svg>< 

が、それはまたに動作しますので、テンプレート内のディレクティブを開始する要素は、次のようになりますリンク関数に渡された要素のsvg子を選択するだけです。