Question

共享库中有简单的过滤器

<th>{{minutes-125 | minutes2hm: false}}</th> --> 125
<th>{{minutes-125 | minutes2hm: true}}</th> --> 02:05

和html

<th>{{minutes-125 | minutes2hm}}</th>

我想将true | false移动到用户设置

.filter('minutes2hm', function () {
    return function (min) {
        if (USERSettings.apply === false) {
            return min;
        }
        ...
    };

ng serve

哪种方式是

的最佳实践

保存用户设置
在过滤器中使用用户设置

允许在结果中的项目之间共享过滤器代码？

Answer 1

如果在不同的地方使用共享过滤器，那么首先使用不同的名称创建第二个自定义过滤器，然后从服务获取用户设置（过滤器可以使用依赖性注入），最后一个 - 调用$filter服务自定义过滤器中的“旧”过滤器，示例用法：

app.filter('userMinutes2hm', function($filter,$userSettings) {
return function(min) {

    return $filter('minutes2hm')(min,$userSettings.apply); //use filter in filter with param from service
}
});

PS。我看到你有全局变量USERSettings，这是错误的做法，为用户设置创建一些服务（$userSettings），如上所示。

总结：最佳做法是使用全局设置的服务，而不是角度以外的全局变量。服务是单件，所以也可以存储/保存数据，如果你想永久存储数据，那么服务可以使用例如localStorage。

Answer 2

为什么使用以下代码？什么是以下代码的使用？

<div class="header-bar">
  <div class="wrapper medium-down--hide">
    <div class="large--display-table">
      <div class="header-bar__left large--display-table-cell">            
      </div>    
      <div class="header-bar__right large--display-table-cell">
        <div class="header-bar__module">
          <a href="/cart" class="cart-toggle">
            <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
            Cart
            <span class="cart-count header-bar__cart-count">2</span>
          </a>
        </div>                                
          <div class="header-bar__module header-bar__search">
            <form action="/pages/search-results" method="get" role="search">                  
              <span role="status" aria-live="polite" class="isp_polite_powered_by_id ui-helper-hidden-accessible">Powered by InstantSearch+ <a href="http://www.instantsearchplus.com">Site Search Autocomplete</a></span><input name="q" value="" aria-label="Search our store" class="header-bar__search-input ui-autocomplete-input" autocomplete="OfF" autocorrect="off" autocapitalize="off" id="input_id_0_suggestor_007" isp_ac="OfF" type="search">
              <button type="submit" class="btn icon-fallback-text header-bar__search-submit">
                <span class="icon icon-search" aria-hidden="true"></span>
                <span class="fallback-text">Search</span>
              </button>
            </form>
          </div>            
      </div>
    </div>
  </div>
  <div class="wrapper large--hide">
    <button type="button" class="mobile-nav-trigger" id="MobileNavTrigger">
      <span class="icon icon-hamburger" aria-hidden="true"></span>
      Menu
    </button>
    <a href="/cart" class="cart-toggle mobile-cart-toggle">
      <span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
      Cart <span class="cart-count">2</span>
    </a>
  </div>
  <ul id="MobileNav" class="mobile-nav large--hide">

  <li class="mobile-nav__link" aria-haspopup="true">        
      <a href="/" class="mobile-nav">
        Home
      </a>        
  </li>            
  <li class="mobile-nav__link" aria-haspopup="true">        
      <a href="/search" class="mobile-nav">
        Search page
      </a>        
  </li>            
  <li class="mobile-nav__link" aria-haspopup="true">        
      <a href="http://instantsearchplus.myshopify.com/pages/search-results/collections-accessories" class="mobile-nav">
        Accessories
      </a>        
  </li>            
  <li class="mobile-nav__link" aria-haspopup="true">        
      <a href="http://instantsearchplus.myshopify.com/pages/search-results/collections-best-seller" class="mobile-nav">
        Best Seller
      </a>        
  </li>            
  <li class="mobile-nav__link" aria-haspopup="true">        
      <a href="http://instantsearchplus.myshopify.com/pages/search-results/collections-gloves" class="mobile-nav">
        Gloves
      </a>        
  </li>            
  <li class="mobile-nav__link" aria-haspopup="true">        
      <a href="/pages/about-us" class="mobile-nav">
        About us
      </a>        
  </li>                      
</ul>    
</div>

如果您不使用过滤器，请不要在if (apply === false) { //and if (USERSettings.apply === false) return min; }上调用过滤器。为什么需要通过<th>

因此，如果您删除该代码，那么您的true|False和结果应该如下所示

<th>

和过滤器代码看起来像

<th>{{minutes-125 </th> --> 125
<th>{{minutes-125 | minutes2hm}}</th> --> 02:05

角度滤波器|全局设置（最佳实践）

2 个答案: