javascript - angularjs watch




Wie bekomme ich html-Element nach ID übergeben von ng-init von eckig (2)

Ich könnte das Element von HTML durch ID bekommen, wenn ich ng-klicken, aber mit ng-init bekomme ich null. Bitte überprüfen Sie meinen Stift 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>

Regler

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

Du könntest es über angular $ timeout bekommen, das ist bis zum Ende des eckigen Zyklus und den gerenderten Elementen

Regler

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

}]);

Sie können nicht auf DOM-Elemente in ng-init zugreifen, da sie zu diesem Zeitpunkt noch nicht zum DOM hinzugefügt wurden. Direkter Zugriff auf DOM-Elemente in eckigen Winkeln ist sowieso verpönt, also überdenken Sie vielleicht Ihr Code-Design.

Siehe https://docs.angularjs.org/api/ng/directive/ngInit für die angemessene Verwendung dieser Richtlinie.

Es gibt nur ein paar geeignete Verwendungen von ngInit , beispielsweise für das Aliasing spezieller Eigenschaften von ngRepeat , wie in der folgenden Demo gezeigt; und zum Injizieren von Daten über serverseitiges Scripting. Neben diesen wenigen Fällen sollten Sie Controller anstelle von ngInit verwenden, um Werte für einen Bereich zu initialisieren.







angularjs-scope