Problem mit MD-Dialog

Question

Ich habe einen MD-Dialog-Controller wie unten.

var HomeController = function ($scope) { 

      $scope.demoNonLinear = function() { 
var element = document.querySelector('.mdl-stepper#stepper-non-linear'); 
       if (!element) return false; 
       var stepper = element.MaterialStepper; 
       var steps = element.querySelectorAll('.mdl-step'); 
       var step; 

       // Upgrade the component. 
       if (typeof componentHandler === 'undefined') { 
        console.log('Missing componentHandler'); 
       } else { 
        console.log('componentHandler is available'); 
        componentHandler.upgradeAllRegistered(); 
       } 

       for (var i = 0; i < steps.length; i++) { 
        step = steps[i]; 
        step.addEventListener('onstepnext', function (e) { 
         setTimeout(function() { 
          stepper.next(); 
         }, 4000); 
        }); 
       } 

      }; 
     }; 

Die Linie

var element = document.querySelector('.mdl-stepper#stepper-non-linear'); 

nicht auf dem md-Dialog von HTML-Code stattdessen funktioniert es auf dem Hauptdokument. Kann ich es auf meinem MD-Dialog-Inhalt arbeiten lassen?

Plunker Link "https://plnkr.co/edit/ixMI8FKbhyTgL5sYieVa?p=preview"

Answer 1

dieses Versuchen Sie Ihr Element in Winkel auszuwählen.

var element = angular.element(document.querySelector('#stepper-non-linear')); 

EDIT FÜR GUTE ANSATZ

Ich habe die Funktion in einem angular.element(document).ready Ereignis eingewickelt, die ausgeführt werden, wenn das Dokument bereit ist, statt der $timeout Ansatz.

DEMO PLUNKER