0

angularJS を使用してクロム拡張を作成していますが、問題が発生しました。

ポップアップページにボタンを追加したいのですが、ボタンをクリックすると先祖ノードが消えてしまいます。これが私のコードです。

popup.html で

<div class="deadline">
  <div class="btn-group">
    <button class="btn" ng-click="removeDeadline()">complete</button>
  </div>
</div>

controller.js で

$scope.removeDeadline = function(){
  $(this).closest(".deadline").remove();
}

なぜそれがうまくいかないのかわかりません。私を助けてください。

4

1 に答える 1

9

まず、$jQuery 関数です。拡張機能に jQuery を含めましたか? そうでない場合は、angular.elementAngularJS に同梱されている組み込みの「jQuery Lite」の機能です。

第 2 に、AngularJS を使用する場合、コントローラー アクション内から DOM 要素にアクセスするのは不適切な形式です。Angular は、( を介して$scope) モデルの状態を自動的に反映するビューに関するものです。たとえば、あなたが示したスニペットは、次のようにより適切に記述されます。

<div class="deadline" ng-hide="hideLine">
  <div class="btn-group">
    <button class="btn" ng-click="removeDeadline()">complete</button>
  </div>
</div>

$scope.removeDeadline = function(){
  $scope.hideLine = true;
}

FAQからのこの引用を心に留めてください。

コントローラーで DOM を変更するために jQuery を使用するのをやめます。本当。これには、要素の追加、要素の削除、コンテンツの取得、表示と非表示が含まれます。組み込みディレクティブを使用するか、必要に応じて独自のディレクティブを作成して、DOM 操作を行います。機能の複製については、以下を参照してください。

この習慣を断ち切るのに苦労している場合は、アプリから jQuery を削除することを検討してください。本当。Angular には $http サービスと強力なディレクティブがあるため、ほとんどの場合不要になります。Angular にバンドルされている jQLite には、特にイベントへのバインドなど、Angular ディレクティブを記述する際に最も一般的に使用されるいくつかの機能が含まれています。

于 2013-05-05T08:16:55.333 に答える