반투명 DOM 콘텐츠에서 필터링이 작동하지 않습니다.

Question

두 개의 AngularJS (버전 1.6.5) 구성 요소를 구축 중이며 transclusion을 사용할 때 필터링 기능을 사용할 수 없습니다.

app.component('panelWithTitle', { 
    template: '<div><h1>{{$ctrl.title}}</h1><div class="content" ng-transclude></div></div>', 
    bindings: { 
    title: '@' 
    }, 
    require: 'title', 
    transclude: true 
}); 

두번째 성분이 용기 (<panel-with-title>)를 사용하는 간단한 (입력 필드에서) 필터링 된리스트를 공급 :

제 1 성분은 <div> 콘텐츠를 채우는 트랜스 클루 전을 사용하는 간단한 컨테이너 :

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> 
}); 

해당 상태에서 $scope.filterValue은 정의되지 않았기 때문에 필터링이 작동하지 않습니다. Here is a demo Plunkr. 나는주의 : 나는 (: 나는 간단한 <div> 태그에 의해 <panel-with-title> 태그를 대체 할 경우, 예를 들어) 트랜스 클루 전을 사용하지 않는 경우

• 필터링이 작동된다.
• 어쨌든 $scope.allItems이 올바르게 정의되었습니다.

내가 제대로 작동하지 않게하려면 어떻게해야합니까? $scope.allItems이 정의 된 동안 $scope.filterValue이 정의되지 않은 이유는 무엇입니까?

감사합니다.

Answer 1

항상 undefined이고 필터는 true을 반환합니다. 템플릿이 다른 범위를 사용하기 때문입니다.

<input type="text" ng-model="$root.filterValue"> 

및 구성 요소를 사용 $scope.$parent.filterValue에 :

과 같이 filterValue에 $root를 추가

return item.indexOf($scope.$parent.filterValue) !== -1; 

Demo Plunker

---

BTW, 좋은 질문 :

Answer 2

당신이 더 많은 코드 수단을 작성하지 않으려면 (filterFunc 기능) 당신은 모델 (NG-모델 = "FILTERVALUE")이 코드를 연결해야 다음

에 대한 모델을 통해 직접 필터. 내 아래 plunker 링크를 찾아주세요 -

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> 
});