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

• 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

2 Answers 2

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.