如何在AngularJS控制器中获取当前作用域dom-element?

时间:2012-10-18 17:52:08

标签: javascript jquery dom scope angularjs

我有一个outerItems列表。在每个outerItem中,我有一个innerItems列表。它们是动态排序的。

当鼠标光标指向innerItems之一时,我必须在该innerItem元素的正上方显示弹出窗口。

Popup div是body的孩子,因为我不希望每个innerItem都有一个单独的弹出窗口。

我看到它的方式 - 在ng-mouseover上我调用了将左/顶属性设置为绝对定位弹出窗口的函数。因此,对于每个innerItems,我想调用jQuery .offset()方法,该方法从页面的左上角给出左/上值。

那么如何获取当前范围元素的jQuery对象?或者,如果我选择了错误的方式

2 个答案:

答案 0 :(得分:69)

在控制器中:

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

答案 1 :(得分:7)

更好更正确的解决方案是拥有一个指令。无论是在指令的控制器还是主控制器中,范围都是相同的。使用$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'
});