Question

你好我正试图从角度指令中获取DOM中的元素。

这个元素：

我试图通过unknow 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

你没有使用jqLite包装器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>

从DOM获取元素

1 个答案: