DOM内のフィルタリングされていないDOMコンテンツのフィルタリング

Question

AngularJS（バージョン1.6.5）コンポーネントを2つ作成していますが、トランジションを使用するとフィルタリングができません。

第一成分が<div>コンテンツを移入するトランスクルージョンを使用する単純な容器である：第二成分が容器（<panel-with-title>）を使用し、単純な濾過（入力フィールドから）のリストでそれを供給

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

：

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

$scope.filterValue常にundefinedとフィルタでは、trueが返されます。これは、テンプレートが異なるスコープを使用するためです。

だから、同じようfilterValueに$rootを追加します。

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

とコンポーネントの使用$scope.$parent.filterValue中：

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

Demo Plunker

---

ところで、素敵な質問:)

Answer 2

あなたはより多くのコード手段を記述したくない場合（filterFunc機能）あなたがモデル（NG-モデル=「filterValue」）にこのコードを接続する必要があり、その後

用モデルを介して直接フィルター。

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