कोणीयजेएस: ngStyle

Question

के लिए फ़िल्टर लागू करें सभी के लिए शुभ दिन!

मुझे AngularJS को समझने में कोई समस्या है। क्या मैं अपने कस्टम फ़िल्टर को ngStyle निर्देश के भीतर उपयोग कर सकता हूं? जब मैं इनपुट में मूल्य बदलता हूं (लेकिन यह मार्कअप में मान बदलता है) तो यह एक ही समय में स्पैन टैग की अस्पष्टता क्यों नहीं बदल सकता है? कंट्रोलर स्कोप का उपयोग करके सीधे मैं इस व्यवहार को कैसे महसूस कर सकता हूं?

मेरे कच्चे कोड: 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> 

जे एस:

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

JSFiddle पर मेरे कोड: http://jsfiddle.net/zkdkLac3/

Answer 1

सामान्य प्रश्न का उत्तर देना, हाँ, आम तौर पर आप एक उपयोगकर्ता का उपयोग कर सकते सामान्य कोणीय अभिव्यक्तियों में filter बनाया गया। पार्सिंग त्रुटि (शायद कोणीय पार्सर में एक बग) के कारण आपको ng-attr के साथ समस्या हो सकती है। तुम अब भी

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

ng-attr साथ ng-attr में फिल्टर का उपयोग कर सकते हैं, हालांकि शैली के लिए बाध्य करने के लिए सबसे अधिक लाभकारी है सीधे नीचे के साथ

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

का उपयोग करके सीधे

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

आप भी शैली दे सकते हैं वस्तुओं filter:

app.filter('opacity', function() { 
    return function (input) { 
     return 0.1 * input; 
    }; 
}); 

Working jsfiddle

जो भी समाधान बेहतर मुख्य रूप से जगह है जहाँ आप फिर से उपयोग करने के लिए चीजों की योजना पर निर्भर करता है। फ़िल्टर सभी scope एस में उपलब्ध हैं, लेकिन यह विशेष रूप से किसी दिए गए नियंत्रक के लिए समझ में आता है। यह न भूलें कि पुन: उपयोग निर्देशों के साथ पूरा किया जा सकता है (जिसमें एक नियंत्रक भी हो सकता है)।