robin robin - 6 months ago 83
AngularJS Question

Issue With MD-Dialog

I am having an MD-dialog controller like below.

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

};
};


The line

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


is not working on the md-dialog html instead it works on the main document. Ho can I make it work on my md-dialog content ?

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

Answer

Try this to select your element in angular.

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

EDIT FOR GOOD APPROACH

I've wrapped the function in a angular.element(document).ready event which will be executed when document is ready rather than the $timeout approach.

DEMO PLUNKER

Comments