マウスが正常に動作しない

Question

私はマウスを何かのテキストに入力すると入力ボックスとテキストを非表示にする必要があり、テキストボックスを残すとボックスが表示されなくなり、テキストが表示されるシナリオがある

が、これは

が起きていないHtmlの

<div ng-app> 
<div ng-controller="showCrtl"> 
    <div ng-hide="showme"> 
    <p ng-mouseenter="showme=!showme"> 
     mouse enter 
    </p> 
    </div> 
    <input type="search" ng-if="showme" ng-mouseleave="showme=false"> 
</div> 
</div> 

JS：

function showCrtl($scope){ 
    $scope.showme=false; 
} 

ここに私が試したものがありますDEMO

何か助けていただければ幸いです。

Answer 1

ng-ifディレクティブにプリミティブな値が設定されているという問題があります。ng-ifは、その要素をDOMにレンダリングするたびに子スコープを作成します。この問題を解決するには、新しいオブジェクトを定義してDot Ruleに従ってください。そして、そのオブジェクトの中で使いたいすべてのプロパティを定義します。

スコープ継承がどのように機能するかを詳しく調べるには、this answerを参照してください。

コードでは、オブジェクトを定義する必要があります。具体的には$scope.model = {}とし、そのオブジェクト自体にshowmeというプロパティがあるとします。そして、どこにでもshowmeを使用すると、それはmodel.showmeに置き換えられます。スコープの継承の問題のような種類を解決するための

Demo Fiddle

---

もっと便利な方法は、あなたがcontrollerAsパターンを使用することができ、あります。コントローラ内に$scopeを使用しない場合は、コントローラコンテキストthisを配置するだけです。ビュー上にコントローラを使用している間はエイリアスを作成する必要があり、変数値を取得する場合は変数参照を使用できます。

Answer 2

問題は複数のネストスコープがあることです。入力ボックスに設定されているshowmeは、pに設定されているshowmeとは異なります。これは、Angularが多くのビルトインディレクティブ（ng-ifがその1つ）に新しいスコープを暗黙的に追加するためです。

あなたはいつも同じshowmeプロパティを設定して読んでいることを確認する必要があります。これを行う最も簡単な方法は、コントローラにshowmeプロパティを追加することです。

これを試してみてください。実際には

<div ng-app> 
    <div ng-controller="showCrtl"> 
    <div ng-hide="showCrtl.showme"> 
     <p ng-mouseenter="showCrtl.showme=!showCrtl.showme"> 
     mouse enter 
     </p> 
    </div> 
    <input type="search" ng-if="showCrtl.showme" ng-mouseleave="showCrtl.showme=false"> 
    </div> 
</div> 

、あなたがあなたがいると思うスコープにアクセスしていることを確認することは非常に困難であるため一般的な経験則として、あなたのテンプレートに直接適用範囲をアクセスすることはありませんアクセスする。作業しているコントローラから常にプロパティにアクセスしてください。