Javascript 如何通过从angular的ng init传递的Id获取html元素

当我使用ng click时，我可以通过id获得html元素，但是使用ng init我得到null。请检查我的钢笔

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>

---

下面是另一个或多或少回答你问题的讨论

---

您无法访问

nginit

中的DOM元素，因为此时它们尚未添加到DOM中。无论如何，直接访问angular中的DOM元素都是不受欢迎的，所以可能需要重新考虑您的代码设计

---

有关该指令的适当用法，请参阅

ngInit

只有一些适当的用途，例如用于对

ngRepeat

的特殊属性进行别名，如下面的演示所示；以及通过服务器端脚本注入数据。除了这几种情况之外，还应该使用控制器而不是ngInit来初始化作用域上的值

---

您可以通过angular$timeout获得它，它是等待直到angular cycle完成并渲染元素

控制器

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

}]);

---

首先，您可能应该正确地关闭HTML中的一些标记。只需关闭span标记这不会按您希望的方式工作，因为

ng init

发生在HTML呈现之前，您正在调用一个查找呈现HTML的函数。无论如何，这对于

ng init

是不合适的。此指令可能被滥用，以便在模板中添加不必要的逻辑量。

ngInit

只有少数适当的用途，例如用于对

ngRepeat

的特殊属性进行别名ng init+document.getElementById=2角度错误实践这根本不是一个好方法：如果浏览器由于其他进程而呈现速度较慢，该怎么办？你不能依赖一个timeout@sailens这不是一个

setTimeout

这是

$timeout

在角度摘要之后的角度触发，而不是在浏览器帧之后，与浏览器速度无关！！对。在此之前，我在复习香草javascript，我的思维被卡在那里了。我的道歉非常感谢你们：）

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

}]);