web-dev-qa-db-ja.com

AngularJSコントローラーで現在のスコープdom要素を取得するにはどうすればよいですか？

OuterItemsのリストがあります。各outerItem内には、innerItemsのリストがあります。それらは動的にソートされます。

マウスカーソルがinnerItemsの1つを指すとき、そのinnerItem要素のすぐ上にポップアップウィンドウを表示する必要があります。

Popup divはbodyの子です。innerItemsごとに個別のポップアップを表示したくないためです。

ng-mouseoverにあるように、left/topプロパティを絶対位置のポップアップに設定する関数を呼び出します。したがって、各innerItemについて、ページの左上隅から左/上の値を取得するjQuery .offset()メソッドを呼び出します。

では、現在のスコープ要素のjQueryオブジェクトを取得するにはどうすればよいですか？または、間違った方法を選択した場合

javascriptjquerydomscopeangularjs
53
gorpacrate

コントローラー内：

function innerItem($scope, $element){
    var jQueryInnerItem = $($element); 
}
69
gorpacrate

より適切で正しい解決策は、ディレクティブを持つことです。スコープは、ディレクティブのコントローラー内でもメインコントローラー内でも同じです。 $elementを使用してDOM操作を実行します。ディレクティブコントローラーで定義されたメソッドは、メインコントローラーでアクセスできます。

例、子要素を見つける：

var app = angular.module('myapp', []);
app.directive("testDir", function () {
    function link(scope, element) { 

    }
    return {
        restrict: "AE", 
        link: link, 
        controller:function($scope,$element){
            $scope.name2 = 'this is second name';
            var barGridSection = $element.find('#barGridSection'); //helps to find the child element.
    }
    };
})

app.controller('mainController', function ($scope) {
$scope.name='this is first name'
});
7
shyam_