Question

我在我的项目中使用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}}" />

Answer 1

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

来自AngularJS documentation：

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

Answer 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>

AngularJS过滤器不起作用

2 个答案: