I could get the element of html by id when i use ng-click, but with ng-init I get null. please check my pen

html

<script type="text/javascript">
    var memId = "bb7de28f-0f89-4f14-8575-d494203acec7";
</script>   

<div  ng-app="myapp" ng-controller="MainCtrl" ng-init="getMember(memId)">
    <span id="audio-{{memId}}">
        Your mem ID: {{memId}}
    </span>     
    <span ng-click="getMember(memId)"> click me <span>
</div>

Controller

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

app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.memId = $window.memId;

  $scope.getMember = function(id) {
    console.log(id);
    var voice = document.getElementById('audio-'+ id);
    console.log(voice);
  };
}]);

I could get the element of html by id when i use ng-click, but with ng-init I get null. please check my pen http://codepen.io/solidet/pen/pbJMjq

html

<script type="text/javascript">
    var memId = "bb7de28f-0f89-4f14-8575-d494203acec7";
</script>   

<div  ng-app="myapp" ng-controller="MainCtrl" ng-init="getMember(memId)">
    <span id="audio-{{memId}}">
        Your mem ID: {{memId}}
    </span>     
    <span ng-click="getMember(memId)"> click me <span>
</div>

Controller

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

app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.memId = $window.memId;

  $scope.getMember = function(id) {
    console.log(id);
    var voice = document.getElementById('audio-'+ id);
    console.log(voice);
  };
}]);

• javascript
• angularjs
• angularjs-scope

Share Improve this question Follow edited Jun 14, 2016 at 8:54 Meily Chhon 1171010 bronze badges asked Jun 6, 2016 at 7:43 chourn solidetchourn solidet 30055 silver badges2020 bronze badges 5

• First of all you probably should close some tags correctly in your HTML. – Maximilian Riegler Commented Jun 6, 2016 at 8:04
• just close the span tag – Erez Commented Jun 6, 2016 at 8:06
• this won't work the way you want, because ng-init happens before the HTML is rendered, and you are calling a function that is looking for rendered HTML. This isn't the appropriate use for ng-init anyway. – Claies Commented Jun 6, 2016 at 8:06
• docs.angularjs/api/ng/directive/ngInit "This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat..." – Claies Commented Jun 6, 2016 at 8:08
• ng-init + document.getElementById = 2 angular bad practices – Jscti Commented Jun 6, 2016 at 11:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

you could get it via angular $timeout which is wait until angular cycle finshed and elements rendered

controller

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

app.controller('MainCtrl', ['$scope', '$window', '$timeout', function($scope, $window, $timeout) {
    $scope.memId = $window.memId;
    $scope.getMember = function(id) {

        $timeout(function() {
            console.log(document.querySelector('#audio-' + id))
        });
    };

}]);

You can't access DOM elements in ng-init since they're not yet added to the DOM at this point. Directly accessing DOM elements in angular is frowned upon to anyways so maybe rethink your code design.

---

See https://docs.angularjs/api/ng/directive/ngInit for appropriate uses of that directive.

There are only a few appropriate uses of ngInit, such as for aliasing special properties of ngRepeat, as seen in the demo below; and for injecting data via server side scripting. Besides these few cases, you should use controllers rather than ngInit to initialize values on a scope.