3

AngularJS のディレクティブを使用して最初のステップを実行していますが、このディレクティブは機能しません。

私はng-repeatリストを持っています

<ul ng-after-list-filter>
    <li ng-repeat="item in items | filter:activeFilter.filterType = activeFilter.filterValue">...</li>
</ul>

でフィルタリングされています$scope.activeFilter.filterValue

リストがフィルタリングされた後に実行されるようにディレクティブを作成しようとしているので、その新しい要素ng-after-list-filterでdom操作を行うことができます。ul

これは機能していない私のディレクティブです:

myModule.directive('ngAfterListFilter',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            scope.$watch(scope.activeFilter.filterValue, function(val) {
                console.log('do something here');
            });
        }
    }
});

  1. どうすれば機能しますか？scope.activeFilter.filterValue は更新されていないと思いますが、スコープ内にあり、更新され、リストがフィルタリングされます。この変数を監視しようとしているのに、なぜ機能しないのですか?

  2. このディレクティブを作成するより良い方法はありますか? つまり、リストが更新されたときにDOMの変更を実行したい（物事のサイズを調整する）。を聞く方法はあり$('ul').html()ますか？私はそれを試しましたが、JavaScriptに生のテキストを入れたというエラーが出力されます

4

2 に答える 2

7

$last を使用して、最後の <li> がいつ作成されるかを判断できます。<li> 要素にアタッチできる checkLast ディレクティブの実装については、このフィドル(私は書いていません) を参照してください。

directive('checkLast', function () {
  return function (scope, element, attrs) {
     if (scope.$last === true) {
        element.ready(function () {
           // manipulate ul here, or if that doesn't work
           // try with $timeout:
           // $timeout(function() { 
           //    do manip here
           //}, 0, false);  // remove false if you need $apply to run

https://stackoverflow.com/a/13906907/215945も参照してください

element.ready() が必要かどうか、または動的に生成された要素で機能するかどうかはわかりません。

于 2013-02-01T23:36:04.790 に答える
0

フィルターからフィルター処理された値を再利用したいと思われますか? 正しい？

その場合、あなたが本当にする必要があるのはこれだけです：

<!-- initial filter -->
<ul ng-after-list-filter>
    <li ng-repeat="item in filteredData =  (items | filter:activeFilter.filterType)">{{item}}</li>
</ul>

<!-- reuse what you filtered -->
<div ng-repeat="item in filteredData">{{item}}</div>

これを信用できればいいのですが、これは StackOverflow に関する別の質問で見たトリックであり、今は見つけることができません。

次に、これがいつ更新されたかを知るにはfilteredData、スコープで$watch します。

myModule.directive('ngAfterListFilter',function(){
    return {
        restrict: 'A',
        link: function(scope,element,attrs) {
            scope.$watch('filteredData', function(val) {
                console.log('do something here');
            });
        }
    }
});
于 2013-01-31T13:57:52.053 に答える