从DOM获取元素

Question

您好，我正在尝试从angular指令的DOM中获取元素。

这个元素：

点击图片

我正在尝试通过不知道id获取此元素，这是代码：

传递用户对象：

<dashboard user="user" action="pageSelect(name,pageNumber)"></dashboard>

在templateUrl指令中：

<section>
<li id="Dashboard{{$index}}" ng-repeat="dashboard in user.NavigationMenu">
    <h3 class="PovDashboard">
        <i class="fa fa-tachometer"></i>
        {{dashboardName}}
    </h3>
    <ul class="povPages">

        <li ng-repeat="page in dashboard.Pages"> <i class="povIconRight fa fa-angle-double-right"></i></li>

    </ul>
</li>

这是问题所在：

  scope.$watch('user', function(newValue) {
            if (newValue !== undefined) {
                console.log(scope.user.NavigationMenu[0].Pages);

                var defaultDashboard = scope.user.DefaultDashboardID;
                console.log(scope.user);
                angular.forEach(scope.user.NavigationMenu,function(value,key){
                    if(value.ID === defaultDashboard){
                        console.log(key);

                        // i tried everything 
                        var s = '#Dashboard' + key;
                        var e = angular.element.find(s)
                        //e is  empty
                        console.log(e);

                        //i'm trying to do
                        //e.('.povPages').first().css("display","block"); 

                    }
                })


            }
        });

提前致谢

Answer 1

您在语法上没有使用jqLit​​e包装器angular.element() ，我想您应该尝试使用此方法：

angular.element(s).find('ul').css('display', 'block');

如果您不使用jQuery，则.find()将仅查找标记名。

从文档：

find（）-仅限标签名称查找

---

或者更好地用ng-show/ng-hide用角度方式做到这一点：

<ul class="povPages" data-ng-show='isVisible'>

初始化$scope.isVisible = false; 现在在.$watch()执行以下操作：

scope.$watch('user', function(newValue) {
    if (newValue != undefined) {
        console.log(scope.user.NavigationMenu[0].Pages);

        scope.isVisible = newValue != undefined ? true : false;
        console.log(scope.user, scope.isVisible);
    }
});

样本演示：

 angular.module('demoapp', []).controller('demoCtrl', ['$scope', '$timeout', function($scope, $timeout) { $scope.arr = [{ text: "one" }, { text: "two" }]; $scope.isVisible = false; $timeout(function() { $scope.isVisible = true; }, 2000); } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <div ng-app='demoapp' ng-controller='demoCtrl'> <div ng-repeat="obj in arr"> <h1>see if list is visible == {{isVisible}} {{obj.text}}</h1> <ul ng-show='isVisible'> <li>should be visible after value change. {{obj.text}}</li> </ul> </div> </div>