在angularjs過濾器中添加watch（）

我正在嘗試創建一個篩選器，用於在瀏覽器正在調整大小並觸及媒體查詢斷點時實時轉換字符串。在angularjs過濾器中添加watch（）

我只是想：

顯示"string.short"當最小寬度< = 200像素
顯示"string.long"當最小寬度> 200像素
使它通用和可重複使用的（不想把代碼在一個控制器）
不能使用指令，因爲，我會填寫標題/值/ alt屬性

到目前爲止，它在加載時工作（不調整大小），但我想添加瀏覽器調整大小檢測以適應標籤，如果用戶調整其瀏覽器。

HTML：

<input value="{{ 'string' | responsivize}}" />

過濾：

angular.module('filters.responsivize', []) 

.filter('responsivize', [function() { 
    return function(key) { 

     var showShort = function() { 
      return Modernizr && !Modernizr.mq('only all and (min-width: 768px)'); 
     }; 

     //TODO: add any way to wath this in real time ? 
     //$rootScope.$watch(showShort, function() {}); 
     //jQuery(window).resize(function() {}); 

     return key.concat(showShort() ? '.short' : '.long'); 
    }; 
}]);

（部分）工作的jsfiddle http://jsfiddle.net/2Q8eL/2/

來源

2014-03-13 Cétia

過濾角檢測之後應僅用於格式化/過濾器的數據的值以過濾器已更改。您當然可以將$ rootScope注入您的過濾器並調用$ rootScope。$ apply（）來觸發Angular再次調用過濾器，但這對其他開發人員來說會有點混亂。

我想說你有兩個選擇。一個是爲你的應用程序模塊添加一個運行模塊，在$ rootScope中添加一個你可以調用的方法，它偵聽調整事件大小並調用$ rootScope。$ apply（）。

所以，你應該這樣做，而不是：

<input value="{{responsivize('string')}}" />

另一種選擇是不是把它運行塊，但做一個指令，而不是仍然放置在$ rootScope的responsivize方法。您可以將該指令命名並將其添加到您的<body>。

基本上是這樣的：

angular.module('app') 
    .directive('responsivize', function($rootScope) { 
    return { 
     restrict: 'A', 
     link: function(scope, elm, attr){ 
     var showShort = Modernizr && !Modernizr.mq('only all and (min-width: 768px)'); 

     jQuery(window).resize(function() { 
      var showShort = Modernizr && !Modernizr.mq('only all and (min-width: 768px)'); 
      $rootScope.$apply(); 
     }); 

     $rootScope.responsivize = function(key) { 
      return key.concat(showShort ? '.short' : '.long'); 
     } 
     } 
    }; 
    });

和HTML：

<body responsivize> 
    ... 
</body>

這樣，它是孤立的這一指示，並可以重複使用。請注意，窗口大小調整事件可能會觸發很多次，因此您可能需要調整您調用$ rootScope。$ apply（）的次數。

將它作爲一種方法而不是過濾器的好處是，調用方法的代碼可以自由地格式化/使用返回值。

來源

2014-03-13 08:48:18

感謝你的提議，對於根管鏡方法來說是個好主意。你能否詳細說明你的第二個選擇？我不明白「」部分。 –

我已經用示例更新了我的帖子。 –

取決於$ locale的過濾器怎麼樣，可以動態改變？ –

在angularjs過濾器中添加watch（）

回答

相關問題