javascript - 1 つの要素がアクティブな場合、別の Angular JS を表示しない

Question

私はAngularJSプロジェクトに取り組んでいます。検索バーとプロフィール、カートアイコンが近くにあるお店です。

検索バーをクリックすると、右に伸びて右のアイコンに重なって表示されます。その場合でも、カート内のアイテムの数は引き続き表示されます。

検索バーが「アクティブ」なときに、カート要素内のアイテムの数を非表示にする必要があります。どうすればこれを行うことができるかについて何かアドバイスをいただけますか? について読んhasElement()だことがありますが、ここでは解決策ではないようです。

コード：

HTML

 <div id="ch-shopping-cart-icon-container" class="ch-shopping-cart">
    <div class="ch-shopping-cart-icon" role="button" aria-label="Shopping Cart">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 36 36"><path 
      d="..."/>
      </svg>
    </div>
    <div class="ch-shopping-cart-counter"></div>
 </div>

 <div id="ch-search-box-wrap">
   
   <here injects the search bar component>

 </div>

CSS

@media (min-width: 768px) {
        #ch-search-box-wrap:active,
        #ch-search-box-wrap:focus-within {
          padding-right: 0;
          z-index: 9999;
          right: -10px;
        }
      }
      #ch-search-box-wrap {
        position: absolute;
        z-index: 999;
        height: 56px;
        width: 100%;
        margin: auto;
        display: block;
        max-width: 750px;
        padding-right: 95px;
        right: 0;
        transition: .2s;
      }

のようなものを使用ng-ifしch-shopping-cart-counterます。表示しない場合#ch-search-box-wrap:active。アクティブでない場合は表示します。

ありがとうございました！