javascript - 从 DOM 获取元素

Question

你好，我正在尝试以 Angular Directive(指令)从 DOM 获取元素。

这个元素:

click image

我试图通过未知的 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() - Limited to lookups by tag name

<小时/>

或者更好地使用ng-show/ng-hide以 Angular 方式实现:

<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>