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

gor*_*ate 53 javascript jquery dom scope angularjs

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

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

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

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

那么我怎样才能获得当前范围元素的jQuery对象?或者,如果我选择了错误的方式

gor*_*ate 69

在控制器中:

function innerItem($scope, $element){
    var jQueryInnerItem = $($element); 
}
Run Code Online (Sandbox Code Playgroud)

  • 如果您必须处理将Angular与现实世界集成的问题,那么访问控制器中的元素是完全可以的. (102认同)
  • 你选错了方法.不要永远访问控制器中的$元素.您需要将其包装为Popup指令,然后将其放入HTML中的弹出窗口中. (44认同)
  • @hurshagrawal:我听到了很多这样的口头禅,但它没有一个让我知道如何为谷歌地图编写控制器,并在不操纵DOM的情况下添加自定义控件.(让控制器委托服务进行操作不会计算.)angular-google-maps不具备添加自定义控件的功能,可能就是出于这个原因.如果您或您的任何门徒可以告诉我,请在此处发布代码.否则,我将继续假设你的口头禅与任何其他教条同样适用于现实世界. (24认同)
  • 它违背了角度的无控制操纵控制器口头禅.保持代码解耦,允许更容易的测试,并保持所有dom操作代码声明和模板中.话虽如此,有时你需要元素.例如,浏览器自动填充字段会填充输入但不会触发ng_model更新.在这些情况下,您需要输入$(el).val(). (12认同)
  • 这不是理想的,但有时候是不可避免的.就像你正在处理从CMS提供的内部内容一样. (9认同)
  • 在控制器中访问$ element≠操纵dom。例如,如果要遍历控制器内ul中的所有列表项并将每个项的内容存储在数组中怎么办? (2认同)

shy*_*am_ 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'
});
Run Code Online (Sandbox Code Playgroud)