动态添加的元素ID为null

Question

I'm new to angularJS. 我是angularJS的新手。 When I click a button it will show a dialog, the dialog's html code is: 当我单击一个按钮时，它将显示一个对话框，该对话框的html代码为：

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

In controller, when I try to access imgId using JavaScript it showing null. 在控制器中，当我尝试使用JavaScript访问imgId它显示为null。 Same with the JQuery. 与JQuery相同。

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

Here is my code: 这是我的代码：

 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'))); }); } } });

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

( plunker ) （矮人）

Answer 1

You need to give the dialog a chance to render, before you can get a reference to it. 您需要给对话框一个渲染的机会，然后才能获得对它的引用。

Wrap the getElementById calls in a $timeout : 将getElementById调用包装在$timeout ：

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

Keep in mind that you need to include the $timeout in your controller: 请记住，您需要在控制器中包含$timeout ：

function DialogController($scope, $timeout) {

Here's a working example using your plunker's code: 这是一个使用示例代码的工作示例：

 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'))); }); } } });

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

动态添加的元素ID为null

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-12-14 11:54:59

动态添加的元素ID为null

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-12-14 11:54:59

解决方案1
0 已采纳 2016-12-14 11:54:59