Question

我为下拉菜单编写了自定义指令。元素绝对位于相对定位的父元素中，因此我需要获取下拉触发元素的高度，以便移动它下面的实际菜单。触发器是指令元素的子元素。我想避免使用完整的jQuery，而是使用Angular的jqLite。

到目前为止，我的尝试包含一个添加到指令链接函数范围内的函数（以便能够访问element），但我无法链接find()或{ {1}}关闭它以查找子元素。

我的链接和控制器：

children()

这应该做的是，首次单击该按钮时，应使用元素的高度定义范围变量link: function(scope, element, attrs) { scope.clicked = false; scope.positionDropdown = function() { if (!scope.clicked) { scope.clicked = true; scope.buttonHeight = element[0].find('button').offsetHeight; } } }, controller: function($scope) { 'use strict'; $scope.menuActive = false; $scope.toggleMenu = function () { $scope.positionDropdown(); $scope.menuActive = !$scope.menuActive; }; }。相反，我在Chrome开发工具中遇到错误：

buttonHeight

这是我的模板：

TypeError: undefined is not a function
    at Scope.scope.positionDropdown (http://localhost:3000/directives/dropdown/dropdown-directive.js:17:57)
    at Scope.$scope.toggleMenu (http://localhost:3000/directives/dropdown/dropdown-directive.js:25:28)
    at Parser.functionCall (http://localhost:3000/angular/angular.js:10656:21)
    at http://localhost:3000/angular/angular.js:18838:17
    at Scope.$get.Scope.$eval (http://localhost:3000/angular/angular.js:12518:28)
    at Scope.$get.Scope.$apply (http://localhost:3000/angular/angular.js:12616:23)
    at HTMLButtonElement.<anonymous> (http://localhost:3000/angular/angular.js:18837:21)
    at http://localhost:3000/angular/angular.js:2810:10
    at Array.forEach (native)
    at forEach (http://localhost:3000/angular/angular.js:320:11)

我已经设置了一个断点来解决这个问题。 <div class="dropdown" ng-class="{active: menuActive}"> <button ng-click="toggleMenu()">{{ngLabel}}<i ng-class="ngIcon" ng-if="ngIcon"></i></button> <ul ng-show="menuActive" ng-style="{top: buttonHeight}"ng-transclude> </ul>有效，但element[0]方法关闭了find()。 TypeError: undefined is not a function也会出现相同结果的错误。为什么这些选择下拉菜单的方法不起作用？如何在不使用jQuery的情况下选择此项并且不限制页面上的单个下拉列表？

Answer 1

我没有得到你的问题，但是如果你想在Angular中选择一个元素的子元素，你可以这样做：

    link:function(scope,elem,attr){

            // to select parent of parent of current element : 
            elem.parent().parent();
             // to select parent of current element : 
            elem.parent();
             // to select Child(a) of current element : 
            elem.children('a');
            // to select all Childs of current element : 
            elem.children();
            // getting element height
            elem.height();
            // window height : 
             $(window).height();
             // document height:
             $(document).height();
             // distance of your elem to top of the page : 
             $(window).scrollTop() + $(window).height();




    }

Answer 2

尝试在相关按钮上设置ID，例如<button id="myTrigger"></button>，然后使用：

angular.element($document.getElementById('#myTrigger'));

或者，使用elem.children()遍历孩子，并查找按钮类型。

在没有jQuery的情况下访问自定义指令的子元素

2 个答案: