ng-showでDOM要素に対してjavascriptを正しく実行する方法は？

Question

下部にTLDRがあります。そうでなければ、ここには長らく説明があります。

私は、ng-showを使用して一連のさまざまな入力を「ページ」に分割した形式の並べ替えを持っています。

ng-showがアクティブになり、新しい「ページ」を表示して古いものを隠してから、JavaScriptを実行してクラスを追加し、フォーカスを合わせてから、入力を見つけてそれに焦点を当てます。基本的には、この新しいページでユーザーが行う必要がある次のことを強調表示し、迅速な入力に集中します。

私は働くために時計を手に入れようとしていましたが、これは簡単な選択肢がないかもしれないし、正しく動作させることができないかもしれないと感じています。

各ページには、質問、指示、または入力要素である複数のdivがあります。しかし、ページが見えるようになると、divのうちのいくつかがユーザーによって実行可能ではないため、特に強調表示されるdivが1つ（myFocusDirectiveの配置を参照）になります。ページの例：

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

私は属性に$ウォッチのバリエーションをしようとか、$タイムアウトを使用したが、私はNG-ショーが活性化されたとき、正確にのみ一致するように見えることはできませんしてきました。私の理解では、ATTRSに$タイムアウトを使用してみました、それだけのdivのクラスにしてから、「ngの非表示」を適用すべきであるとされるが、私はそれに対して一致するように見えることはできません...

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

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を見ている場合

---

しかし、いずれにしても

、あなたはplunker、HTTPを作成することができます