Angularjs 如果过滤器处于角度方向，如何过滤阵列？_Angularjs_Angularjs Directive

Angularjs 如果过滤器处于角度方向，如何过滤阵列？

angularjs

Angularjs 如果过滤器处于角度方向，如何过滤阵列？,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我尝试创建用于过滤角度数组的通用指令 <body ng-controller="MainCtrl"> controller: <input type="text" ng-model="query.name" /> - work<br> directive: <span filter by="name"></span> - not work <ul> <li ng-repeat="

我尝试创建用于过滤角度数组的通用指令

<body ng-controller="MainCtrl">
    controller: <input type="text" ng-model="query.name" /> - work<br>
    directive: <span filter by="name"></span> - not work
    <ul>
        <li ng-repeat="item in list | filter:query">{{item.name}}</li>
    </ul>
</body>


管制员：-工作

指令：-不工作

{{item.name}

控制器和指令是：

app.controller('MainCtrl', function($scope) {
    $scope.list = [
        {id: 1, name:'aaa'},
        {id: 2, name:'bbb'},
        {id: 3, name:'ccc'}
    ];
});

app.directive('filter', function () {
    return {
        scope: {
            by: '@'
        },
        link: function postLink(scope, element, attrs) {
            element.append(
                '<input type="text" ng-model="query.' + attrs.by + '">');
        }
    }
});

app.controller（'MainCtrl'，函数（$scope）{
$scope.list=[
{id:1，名称：'aaa'}，
{id:2，名称：'bbb'}，
{id:3，名称：'ccc'}
];
});
应用程序指令（'filter'，函数（）{
返回{
范围：{
作者：“@”
},
链接：函数postLink（范围、元素、属性）{
元素.append(
'');
}
}
});

控制器中的过滤器工作，但指令中的过滤器不工作。我不知道怎么修理它

解决方案在plunker中是固定的：

因为您已经隔离了作用域，您必须使用eiter$parent或者您必须使用“=”设置双向绑定，我已经用双向绑定更新了您的示例

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  controller: <input type="text" ng-model="query.name" /> - work<br>
  directive: <span filter by="query"></span> - not work
      <ul>
        <li ng-repeat="item in list | filter:query">{{item.name}}</li>
    </ul>
    <script>
        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.list = [
              { id: 1, name: 'aaa' },
              { id: 2, name: 'bbb' },
              { id: 3, name: 'ccc' }
            ];
            alert("123");
            $scope.query = { name: "" }
        });

        app.directive('filter', function () {
            return {
                scope: {
                    by: '='
                },
                replace: true,
                template:'<input ng-model="by.name"></input>'

            }
        });
    </script>
</body>

</html>


安古拉斯普朗克
文件。写（“”）；
管制员：-工作

指令：-不工作

{{item.name}

var app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.list=[
{id:1，名称：'aaa'}，
{id:2，名称：'bbb'}，
{id:3，名称：'ccc'}
];
警报（“123”）；
$scope.query={name:}
});
应用程序指令（'filter'，函数（）{
返回{
范围：{
作者：'='
},
替换：正确，
模板：“”
}
});

这是一种非常奇怪的过滤方法。即使您可以像通过

链接

那样动态添加元素，

query.name

也无法在指令中解析，因为您已经隔离了范围（您必须使用

$parent.query.name

，这不是一个好主意）。是的，这看起来很奇怪，因为我简化了它，超出了必要的范围。我使用link是因为有时我需要创建

谢谢，但您使用了name
inside-in指令。但我需要创建通用指令，它不知道数据列。所以我的主要问题是如何在变量中传递列名。现在它是name
，但对于其他数据集，它将是任何东西else@MarekL然后您只需要指定by=“query.name”
，并将指令更改为ng model=“by”
：