javascript - 如何在 ng-show 上针对 DOM 元素正确执行 javascript？

Question

底部有一个 TLDR。否则这里就是冗长的解释。

我有一种形式，一系列不同的输入，使用 ng-show 分成“页面”。

我想要的是当 ng-show 激活并显示一个新“页面”并隐藏旧页面时，然后执行 javascript 以添加一个类，聚焦，然后找到输入并聚焦于此。本质上是突出显示用户需要在此新页面上执行的下一步操作，并专注于快速输入。

我一直在努力让 $watch 工作，但我觉得这可能会使某些东西过于复杂，而这些东西可能有更简单的替代方案，但我也无法让它正常工作。

每个页面都有几个 div，它们是问题、说明或输入元素。但是当一个页面变得可见时，我会特别突出显示一个 div(请参阅 myFocusDirective 放置)，因为用户无法操作某些 div。页面示例:

<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>

我一直在尝试在属性上使用 $watch 的变体或使用 $timeout，但我似乎无法仅在 ng-show 被激活时准确匹配。我的理解是它应该只是在 div 的类中应用“ng-hide”，但我似乎无法与之相匹配......

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

还尝试在 attrs 上使用 $timeout，但由于跨 div 应用类导致多个匹配，这不可靠。

scope.$watch(attr.initial, function(newValue) {
    $timeout(function() {
        highlightAndFocus(element[0]);
    });
},true);

任何帮助将不胜感激，我一定在这里遗漏了一些东西。

TLDR；在 ng-show 之后，我想修改 div 上的类，然后专注于 div 中的输入

Answer 1

为什么不让你的生活更轻松，并将你的 ng-show 的内容也传递给你的 div:

<div id="page2" ng-show="isPage(2)">
    <div myFocusDirective focuson="isPage(2)">
        <button>
    </div>
</div>

并观察指令范围内的 focuson？这样就不用担心父类等问题了。

---

但无论如何，如果您正在观看 attr，您应该使用 attr.$observe