0

ユーザーが esc キーを押したときにフィルターの入力フィールドをクリアしようとしています。ディレクティブのマークアップを入力するとすぐに、フィルターが完全に機能しなくなります。

私のマークアップは次のとおりです。

<div ng-app='App'>
  <div ng-controller="MyCtrl">
    <input type="text" ng-model="itemSearch" clear-input clear="clearFilter()" />
    <button ng-click="clearFilter()">Clear</button>
    <ul>
      <li ng-repeat="item in items|filter:itemSearch"> <span>{{item.value}}</span>
      </li>
    </ul>
  </div>
</div>

また、JavaScript は次のとおりです。

var app = angular.module('App', []);

function MyCtrl($scope) {
  $scope.items = [
    {value: 'one two three'}, 
    {value: 'four five six'}
  ];
  $scope.clearFilter = function () {
    $scope.itemSearch = '';
  };
}

app.directive('clearInput', function () {
  function isEscapeKey(keyCode) {
    if (keyCode === 27) {
      return true;
    }
      return false;
    }
    return {
        restrict: 'A',
       scope: {
        clear: '&'
    },
    link: function (scope, element) {
      element.keyup(function (event) {
        if (isEscapeKey(event.keyCode)) {
          scope.clear();
        }
      });
    }
  };
});

ここにサンプルコードがあります：http://jsfiddle.net/darrenthomas/cbcpq/1/

私は経験豊富な JavaScript プログラマーではなく、AngularJS を初めて使用することを指摘しておきます。また、複数の属性を Angular.js 属性ディレクティブに渡すにはどうすればよいですか?も見ました。しかし、実用的な解決策を得ることができません。

4

5 に答える 5

1

削除する ：

scope: {
        clear: '&'
    },

ここでスコープを分離する必要はありません。

Webnetが使用するように：

element.bind('keyup', function (event) {
    if (isEscapeKey(event.keyCode)) {
      scope.clear();
    }
  });

その後、ディレクティブに次を追加$applyします。

app.directive('clearInput', function () {
    function isEscapeKey(keyCode) {
        if (keyCode === 27) {
            return true;
        }
        return false;
    }
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('keyup', function (event) {
                if (isEscapeKey(event.keyCode)) {                                  
                     scope.$apply(function(){scope.clearFilter();});
                }
            });
        },
    };
});

ワーキングデモFiddle

于 2013-10-30T15:09:25.627 に答える
1

フィールドをクリアするだけの場合は、作成したカスタム ディレクティブでスコープを分離する必要はありません。の関数を使用して、$eval()関数scopeを間接的に実行することができclearFilter()ます

app.directive('clearInput', function () {
function isEscapeKey(keyCode) {
    if (keyCode === 27) {
        return true;
    }
    return false;
}
return {
    link: function (scope, element, attrs) {
        element.bind('keyup',function (event) {
            if (isEscapeKey(event.keyCode)) {
                scope.$eval(attrs.clear);
                scope.$apply();
            }
        });
    },
  };
});

ここに更新されたフィドルがあります

于 2013-10-30T15:39:47.303 に答える
0

おそらく複数の回答から選択できます。clear-inputしかし、このディレクティブを完全に再利用可能にしたい場合は、 を使用する必要があると思います$parse。isolate scopeほとんどの場合、そこでを使用できないためですng-model。少なくとも、何が起こっているのかを完全に理解していないわけではありません。

ディレクティブのコードは次のとおりです。

app.directive('clearInput', function ($parse) {
    function isEscapeKey(keyCode) {
        return keyCode === 27;
    }
    return {
        require : "^ngModel",
        link: function (scope, element,attrs,ctrl) {
            if(!ctrl){
                return;
            }
            var ngModelSetter = $parse(attrs.ngModel).assign;
            element.bind("keyup",function (event) {
                if (isEscapeKey(event.which)) {
                    ngModelSetter(scope,"");
                    scope.$apply();
                }
            });
        }
    };
});

その使用法を示すプランカー:

http://plnkr.co/edit/z0Td2tR3JiVPFsbgauhj?p=preview

于 2013-10-30T15:46:16.637 に答える
0

あなたの例では、ブラウザーのコンソール (Chrome では Ctrl + Shift + I でアクセス可能) にエラーが表示されますTypeError: Object [object Object] has no method 'keyup'

あなたのコードは...

  element.bind('keyup', function (event) {
    if (isEscapeKey(event.keyCode)) {
      scope.clear();
    }
  });

しかし、コントローラーでも clear() が定義されているようには見えません。

于 2013-10-30T15:00:19.520 に答える
0

フィドルを更新しました。http://jsfiddle.net/cbcpq/10/ . お役に立てれば

app.directive('clearInput', function () {
function isEscapeKey(keyCode) {
    if (keyCode === 27) {
        return true;
    }
    return false;
}
return {
    restrict: 'A',
    scope: {
        clear: '&'
    },
    link: function (scope, element) {
        $(element).keyup(function (event) {
            if (isEscapeKey(event.keyCode)) {
                scope.itemSearch = "";
                scope.$apply();
            }
        });
    },
};

});

于 2013-10-30T15:16:44.497 に答える