Проблема с MD-Dialog

Question

У меня есть контроллер MD-диалогов, как показано ниже.

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

      }; 
     }; 

Линия

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

не работает на мд-диалог HTML вместо этого он работает на основной документ. Хо, я могу заставить его работать над моим содержанием md-dialog?

Plunker ссылка "https://plnkr.co/edit/ixMI8FKbhyTgL5sYieVa?p=preview"

Answer 1

Попробуйте это, чтобы выбрать элемент в угловой.

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

ИЗМЕНИТЬ ДЛЯ ХОРОШЕГО ПОДХОД

Я завернул функцию в angular.element(document).ready событие, которое будет выполняться, когда документ будет готов, а не $timeout подхода.

DEMO PLUNKER