AngularJS 过滤器不起作用答案

【问题标题】：AngularJS filter does not workAngularJS 过滤器不起作用
【发布时间】：2016-12-10 13:27:12
【问题描述】：

我在我的项目中使用 angular 1.x，我想创建一个过滤器，我知道该怎么做，但它不起作用，它也不会引发任何控制台错误。

这是我的js代码：

var myAPP = angular.module("myAPP",[]);

myAPP.filter("miFilter",function(){
    return function(input){
      return input.replace("normal","400x400");
    };
});

在我的 html 文件中，我使用了这个：

<img src="{{url | miFilter}}" />

【问题讨论】：

您的过滤器有效 (plnkr.co/edit/oSLyBQX461npbuQR6Nu7?p=preview)，我怀疑这是 $scope.url 未定义或未被其控制器设置的问题
问题是使用 src 而不是 ng-src

标签： javascript html angularjs

【解决方案1】：

不要使用src。请改用ng-src。

来自AngularJS documentation：

在 src 属性中使用像 {{hash}} 这样的 Angular 标记无法正常工作：浏览器将从带有文字文本 {{hash}} 的 URL 获取，直到 Angular 替换 {{hash}} 中的表达式。 ngSrc 指令解决了这个问题。

【讨论】：

Lo siento llevo tiempo Consultado esta web, pero es la primea que vez que publico una pregunta y no se muy bien como va este sitio :)
@Keite — 没有干草问题，你 bienvenido 是一个 stackoverflow！ éste es el mejor sitio del mundo... 提示：aquí puedes aprender mucho si usas tags en la búsqueda y filtras artículos por votos/popularidad...
Okey, Gracias por el consejo y la bienvenida.

【解决方案2】：

将此代码用作参考并根据您的代码进行更改。

<!DOCTYPE html>
 <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>

        angular.module('myApp', [])
        .controller('namesCtrl', function($scope) {
            $scope.url = 'http://www.w3schools.com/angular/pic_angular.jpg';
        }).filter("miFilter",function(){
            return function(input){
              return input.replace("normal","400x400");
            };
        });;
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="namesCtrl">
        <img ng-src="{{url | miFilter}}" />
    </div>
</body>

【讨论】：

@Keite 很棒。但这对其他人会有所帮助:)