For those who prefer shorter explanations, there's a TLDR at the end. Otherwise, here's a detailed breakdown.
I have a form that consists of multiple inputs organized into different "pages" using ng-show.
What I aim to achieve is when ng-show reveals a new "page" and hides the previous one, to trigger javascript to add a class, focus on specific input element within the new page. This way, the user knows exactly what action to take next on this newly displayed page.
I've been experimenting with using a $watch function, but it seems like I might be overcomplicating things and potentially missing out on a simpler solution. Additionally, I'm having trouble getting it to work as intended.
Each page contains various divs such as questions, instructions, or input fields. However, upon making a page visible, there is a particular div that I wish to highlight (referencing myFocusDirective placement), as not all divs are interactive for users. Here's an example of how the pages are structured:
<div id="page1" ng-show="isPage(1)">
<div>
Text
</div>
<div myFocusDirective>
<input>
</div>
</div>
<div id="page2" ng-show="isPage(2)">
<div myFocusDirective>
<button>
</div>
</div>
I've attempted different approaches like watching attributes or using $timeout, but haven't been able to accurately identify when ng-show is triggered. My understanding leads me to believe that it should simply apply "ng-hide" to switch classes in the div, yet I am struggling to make this comparison...
scope.$watch(function() { return element.attr('class'); }, function(newValue) {
if (newValue.match(/ng-hide/g) === null && newValue.match(/highlight/g) === null && newValue.match(/complete/g) === null) {
highlightAndFocus(element[0]);
}
},true);
I also tried using $timeout on the attrs, but encountered issues due to multiple matches resulting from classes being applied to several divs.
scope.$watch(attr.initial, function(newValue) {
$timeout(function() {
highlightAndFocus(element[0]);
});
},true);
Any assistance would be highly appreciated, as I feel like I may be overlooking something crucial.
TLDR; Following ng-show activation, I want to adjust div classes and then focus on an input field within the div.