AngularJS: áp dụng bộ lọc cho ngStyle

Question

Ngày tốt cho tất cả mọi người!

Tôi gặp sự cố khi hiểu AngularJS. Tôi có thể sử dụng bộ lọc tùy chỉnh của mình trong chỉ thị ngStyle không? Tại sao nó không thể thay đổi độ mờ của thẻ span cùng một lúc khi tôi thay đổi giá trị trong đầu vào (nhưng nó thay đổi giá trị trong đánh dấu)? Làm thế nào tôi có thể nhận ra hành vi này mà không trực tiếp sử dụng phạm vi điều khiển?

mã thô của tôi: 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; 
      }; 
     }); 
})(); 

Mã của tôi tại JSFiddle: http://jsfiddle.net/zkdkLac3/

Answer 1

Trả lời câu hỏi tổng quát, vâng, nói chung, bạn có thể sử dụng một người sử dụng tạo ra filter trong các biểu thức góc chung. Bạn có thể gặp sự cố với ng-attr do lỗi phân tích cú pháp (có thể là lỗi trong trình phân tích cú pháp góc). Bạn vẫn có thể sử dụng bộ lọc trong ng-attr với

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

ng-attr dù là có lợi nhất cho gắn vào phong cách các đối tượng trực tiếp

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

bạn cũng có thể tạo kiểu trực tiếp bằng cách sử dụng

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

với bên dưới filter:

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

Working jsfiddle

Cho dù giải pháp tốt hơn là chủ yếu phụ thuộc vào nơi bạn dự định tái sử dụng mọi thứ. Bộ lọc có sẵn trên tất cả các scope s, nhưng điều này đặc biệt chỉ có thể có ý nghĩa đối với một bộ điều khiển đã cho. Đừng quên rằng tái sử dụng có thể được thực hiện với các chỉ thị (có thể có một bộ điều khiển) là tốt.