[英]Filtering not working in transcluded DOM content
I am building two AngularJS (version 1.6.5) components and I am not able to get filtering working when I use transclusion.我正在构建两个 AngularJS(1.6.5 版)组件,但在使用嵌入时无法进行过滤。
The first component is a simple container which uses transclusion to populate a <div>
content:第一个组件是一个简单的容器,它使用嵌入来填充
<div>
内容:
app.component('panelWithTitle', {
template: '<div><h1>{{$ctrl.title}}</h1><div class="content" ng-transclude></div></div>',
bindings: {
title: '@'
},
require: 'title',
transclude: true
});
The second component uses the container ( <panel-with-title>
) and feed it with a simple filtered (from an input field) list:第二个组件使用容器(
<panel-with-title>
)并用一个简单的过滤(来自输入字段)列表提供它:
app.component('mainComponent', {
controller: function($scope) {
$scope.allItems = ["10", "100", "200", "42", "1337"];
// Simple filter function (may be more complicated)
$scope.filterFunc = function (item) {
if (!$scope.filterValue) {
// No value
return true;
}
return item.indexOf($scope.filterValue) !== -1;
};
},
template: '<panel-with-title title="MyTitle">' // Replace by <div>
+ '<input type="text" ng-model="filterValue">'
+ '<ul><li ng-repeat="item in allItems | filter:filterFunc">{{item}}</li></ul>'
+ '</panel-with-title>' // Replace by </div>
});
In that state, the filtering is not working because $scope.filterValue
is undefined.在该状态下,过滤不起作用,因为
$scope.filterValue
未定义。 Here is a demo Plunkr .这是一个演示 Plunkr 。 I noticed:
我注意到:
<panel-with-title>
tags by simple <div>
tags).<div>
标签替换<panel-with-title>
标签),过滤会起作用。$scope.allItems
is correctly defined.$scope.allItems
被正确定义。 What did I make wrong to get it not working?我做错了什么让它不起作用? Why
$scope.filterValue
is undefined while $scope.allItems
IS defined?为什么
$scope.filterValue
未定义而$scope.allItems
定义?
Thanks.谢谢。
Your $scope.filterValue
always undefined
and filter returns true
because your template uses different scope.您的
$scope.filterValue
始终undefined
并且 filter 返回true
因为您的模板使用不同的范围。
So add $root
to filterValue
like:因此,将
$root
添加到filterValue
例如:
<input type="text" ng-model="$root.filterValue">
and in component use $scope.$parent.filterValue
:并在组件中使用
$scope.$parent.filterValue
:
return item.indexOf($scope.$parent.filterValue) !== -1;
BTW, nice question :)顺便说一句,好问题:)
If you don't want to write more code means (filterFunc function) then如果你不想写更多的代码意味着(filterFunc 函数)那么
You should connect this code to the model (ng-model="filterValue") for direct filter via the model .您应该将此代码连接到模型 (ng-model="filterValue") 以通过模型进行直接过滤。 Please find my below plunker link -
请找到我下面的plunker链接-
http://plnkr.co/edit/sp9XFUMXLdmSwESujMQD?p=preview http://plnkr.co/edit/sp9XFUMXLdmSwESujMQD?p=preview
app.component('mainComponent', {
controller: function($scope) {
$scope.allItems = ["10", "100", "200", "42", "1337"];
},
template: '<panel-with-title title="MyTitle">' // Replace by <div>
+ '<input type="text" ng-model="filterValue">'
+ '<ul><li ng-repeat="item in allItems | filter:filterValue">{{item}}</li></ul>'
+ '</panel-with-title>' // Replace by </div>
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.