Question

我是angularJS的新手。当我点击一个按钮时会显示一个对话框，对话框的html代码是：

<img id="imgId" ng-src="{{imgSrc}}">

在控制器中，当我尝试使用JavaScript访问imgId时，它显示为null。与JQuery相同。

console.log(document.getElementById('imgId')); // null

这是我的代码：

＆＃13;

angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
  $scope.showCustomDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true
    });

    function DialogController($scope, $timeout) {
      $scope.hello = "Hello World";
      $scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";

      $timeout(function() {
        console.log(document.getElementById('imgId'));
        console.log(angular.element(document.getElementById('imgId')));
      });

    }
  }
});

＆＃13;

<html lang="en">

<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>

<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
  <md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>

</html>

＆＃13;

（plunker）

Answer 1

在获得对象的引用之前，您需要为对话框提供渲染的机会。

将getElementById来电换于$timeout：

$timeout(function(){
    console.log(document.getElementById('imgId'));
    console.log(angular.element(document.getElementById('imgId')));
});

请注意，您需要在控制器中加入$timeout：

function DialogController($scope, $timeout) {

以下是使用您的plunker代码的工作示例：

＆＃13;

angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
  $scope.showCustomDialog = function(ev) {
    $mdDialog.show({
      controller: DialogController,
      template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose: true
    });

    function DialogController($scope, $timeout) {
      $scope.hello = "Hello World";
      $scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";

      $timeout(function() {
        console.log(document.getElementById('imgId'));
        console.log(angular.element(document.getElementById('imgId')));
      });

    }
  }
});

＆＃13;

<html lang="en">

<head>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>

<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
  <md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>

</html>

＆＃13;

动态添加的元素id为null

1 个答案: