Question

这里我试图扩展标准文本过滤器以执行get请求并将值传递给扩展过滤器用户已进入

过滤器名称为“搜索”：

myapp.filter('search', function($filter){    
  console.log('search param'+$scope.search)
  $http.get('http-hello2.html').success(function (data) {
           return $filter;
    });

但收到错误：

Error: [$http:badreq] http://errors.angularjs.org/1.4.9/$http/badreq?p0=undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:6:416
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:85:218)
    at Function.c.$get.m.(anonymous function) [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:90:109)
    at link (https://run.plnkr.co/rz2TWpQpyYaVbHXN/script.js:14:27)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:73:222
    at ca (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:73:279)
    at I (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:62:174)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:69:193
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js:119:221 <status-viewer url="sourceUrl" class="ng-isolate-scope">

如何扩展标准AngularJS文本过滤器以调用自定义功能并将参数传递给此过滤器？自定义功能应在调用标准过滤器逻辑之前发生。

plnnkr：https://plnkr.co/edit/F0XsOPZKq5HArFo9vtFs?p=preview

src：

goob.html : 
goob

http-hello2.html
2. http-hello2.html

test.html : 
test

index.html : 
<!doctype html>
<html ng-app="app">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="script.js"></script>
  </head> 
  <body>

  <div ng-controller="FetchCtrl">

<label>Filter: <input ng-model="search"></label> 


<div ng-repeat="sourceUrl in sourceUrls | filter:search">
  <status-viewer  url="sourceUrl">   </status-viewer>
</div>
    </div>


 </body>
</html>

mytemplate.html : 

<!--<h1>{{url}}</h1>-->
<div>
    <p>{{model}}</p> 

</div>

script.js : 
var myapp = angular.module('app', []).controller('FetchCtrl', FetchCtrl)

myapp.directive('statusViewer', function ($http , $interval) {
            return { 
                restrict: 'E',
                templateUrl: 'mytemplate.html', 
                scope: {
                    url: '='
                },  
                link: function (scope, elem, attrs, ctrl) {

                    scope.isFinishedLoading = false;

                    $http.get(scope.url).success(function (data) {
                         scope.model = data;
                    });
                }
            };
        });

myapp.filter('search', function($filter){    
  console.log('search param'+$scope.search)
  $http.get('http-hello2.html').success(function (data) {
           return $filter;
    });

}); 

function FetchCtrl($scope, $http, $q , $parse) {


$scope.sourceUrls = [
                'http-hello2.html',
            ,'test.html'
            ,'goob.html'];



}

Answer 1

首先，您需要将$ http服务注入过滤器，以防止出现错误：

myapp.filter('search', function($filter, $http){

第二件事：

你不应该做

$http.get(scope.url)

不确定scope.url是否已设置。我建议按条件提出要求;

 if(scope.url){
   //$http.get(scope.url)...
 }

Answer 2

出现错误，因为最初你没有价值 $scope.search值和网址已经过undefined，其他情况是您尝试使用$scope内置过滤器，无法访问

我可以看到你不想在改变输入值时加载一些模板。根据您当前的方法，您希望根据输入从过滤器加载模板（如果我理解正确的话）。但似乎你走错了路。

基本上过滤用于对绑定进行一些操作，同时显示一些值（如显示大写的普通单词将使用大写过滤器）。在这里，您使用过滤器在输入change上加载模板（基本上会触发过滤器，但不是因为输入更改，它会在摘要周期触发）。每次摘要周期都会运行时，它会生成一个ajax来获取该模板。技术角度过滤器不适用于您在那里做的事情。

扩展文字过滤器原来是错误的做法，因为您不需要对其进行扩展。

更好我说你应该在某个函数的输入字段上放置ng-change事件，这将在每次输入更改时触发该函数。并且它不会对过滤器工作做任何改变。通过进行此更改，仅当输入为changed

时才会进行模板调用

<强>标记

<input ng-model="search" ng-change="change()" />

<强>代码

$scope.change = function() {
    //code here.
};

扩展文字过滤器

2 个答案: