AngularJS: ngStyle

Question

için filtreyi uygulayın Herkes için iyi günler!

AngularJS'yi anlama konusunda bir sorunum var. Özel filtremi ngStyle yönergesinde kullanabilir miyim? Girişteki değeri değiştirdiğimde (ancak işaretlemede değeri değiştirdiğinde) neden aynı zamanda yayılma etiketinin opaklığını değiştiremez? Doğrudan denetleyici kapsamı kullanmadan bu davranışı nasıl gerçekleştirebilirim?

Benim ham kodu: HTML:

<div ng-app="app"> 
    <div ng-controller="AppCtrl"> 
     <input type="number" ng-model="slider" max="10" min="1"> 
     <span ng-style="{'opacity': '{{slider | filter}}'}">TEXT</span> 
    </div> 
</div> 

JS:

(function() { 
    angular 
     .module('app', []) 
     .controller('AppCtrl', ['$scope', function ($scope) { 
      $scope.slider = 6; 
     }]) 
     .filter('filter', function() { 
      return function (input) { 
       return 0.1 * input; 
      }; 
     }); 
})(); 

JSFiddle Benim kod: http://jsfiddle.net/zkdkLac3/

Answer 1

genel sorusunu yanıtlayan evet, genellikle bir kullanıcı kullanabilir jenerik açısal ifadelerde filter oluşturdu. Bir ayrıştırma hatası (muhtemelen açısal ayrıştırıcıda bir hata) nedeniyle ng-attr ile ilgili sorunlar yaşıyor olabilirsiniz. Yine de bu tarz bağlanma için en faydalı olan doğrudan aşağıda ile

<span style="opacity: {{slider|opacity}}">TEXT</span> 

kullanarak doğrudan

<span ng-style="sliderStyle">TEXT</span> 

ayrıca stil ekleyebilirsiniz nesneleri

<span ng-style="{ 'opacity': (slider | opacity) }">TEXT</span> 

ng-attr ile ng-attr filtreler de kullanabilirsiniz filter:

Çözelti ağırlıklı iyidir Hangisi

Working jsfiddle

şeyler kullanımlık yeniden planlıyoruz yere bağlıdır. Filtreler tüm scope s genelinde mevcuttur, ancak bu özellikle belirli bir kontrolör için anlamlı olabilir. Yeniden kullanımın direktiflerle (bir denetleyiciye sahip olabilir) de gerçekleştirilebileceğini unutmayın.