Question

如果在元素中使用 ng-if，getElementByID 在角度中不起作用

2015-09-30

5254

angularjs

我的 html 中有一个段落元素。仅当值为 true 时，该元素才可见。我已使用 ng-if 来检查。我尝试通过 getElementByID 访问该元素，但它返回 null。

但是，我能够访问未使用 ng-if 的 html 中的另一个段落元素。如何访问段落元素并获取与 angular 指令绑定的值？

Html

<!DOCTYPE html>
<html ng-app="testApp">

  <head>

    <script data-require="angular.js@*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="pull-right" style="margin-top:50px;margin-right:100px" ng-controller="MainController">
      <div>
        <p id="link" ng-if="user.isAdmin">New Link</p>

         <p id="test">
      </div>


              {{value}}

            </div>
  </body>

</html>

Angular JS

var app = angular.module('testApp',[]);

app.controller('MainController', ['$scope', function($scope) {
  $scope.user={};
  $scope.today = new Date();
  $scope.user.isAdmin=true;
  $scope.value = "Test123";

  var objstatic = document.getElementById('link');
  console.log(objstatic);//returns null

   var objdynamic = document.getElementById('test');
  console.log(objdynamic);
  objdynamic.innerHTML="Dynamic Test";


}]);

工作副本在此处更新工作演示

Answer 1

问题是您试图在摘要循环呈现元素之前访问该元素。如果您将代码更改为使用 $timeout，那么您将看到该元素

$timeout(function() {
    var objstatic = document.getElementById('lnkmanage');
    console.log(objstatic);
  }, 0);

Answer 2

使用监视并检查范围变量的变化。

$scope.$watch('user.isAdmin', function(newValue, oldValue) {
  if($scope.user.isAdmin) {
    var objstatic = document.getElementById('lnkmanage');
    console.log(objstatic);
  }
});

Answer 3

尝试一下

angular.element(document.getElementById('lnkmanage')).scope().$apply()

Durgpal Singh

2017-09-20