3

$http.get()残りのAPIを呼び出して、サービスを使用してangularJSの配列に入力しています。この配列は を使用して表示されますng-repeat。各タグにカーソルを合わせるとボタンを表示する Jquery コードがあり<li>ます。$httpJquery がバインドを完了するまでに、データのフェッチに遅延が発生します。そのため、ホバー機能は機能しません。これに対する回避策はありますか？

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="angular.js"></script>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
    myFunction();
});
var myFunction= function(){
$("#orders ul li").hover(
        function() {
            $(this ).find(".butt-view").show();
        },
        function() {
            $(this ).find(".butt-view").hide();
        });
}
</script>
<script>
function PhoneListCtrl($scope) {
    $scope.phones = $http.get(url);
}
</script>
<style>
ul{list-style-type:none;}
ul li{background-color:#e1eff2; padding:5px 6px;}
ul li:hover{background-color:#fff;}
.butt-view{background-color:#feb801; border-radius:4px; color:#fff; font: bold 12px Arial, Helvetica, Sans-serif; padding:5px 7px; margin-top:3px; width:40px }
</style>
</head>
<body ng-controller="PhoneListCtrl">
<div id="orders">
<ul>
<li ng-repeat="phone in phones" >
  {{phone.name}}
  <p>{{phone.snippet}}</p>
  <p class="butt-view">View</p>
</li>
</ul>
</div>
</body>
</html>
4

3 に答える 3

17

jQuery のアプローチは問題なく機能するかもしれませんが、これは実際には問題を解決する AngularJS の方法ではありません。

AngularJS は、宣言的な方法で表現された UI を促進します (つまり、効果を達成するために実行するすべての小さなステップを示すのではなく、目的の効果を記述します)。ディレクティブを使用して、AngularJS に、モデルの変更に応じて UI をどのように見せたいかを伝えることができます。そのため、AngularJS では、テンプレートで UI を宣言的に記述し、モデル ミューテーションによってこの UI を駆動することに重点を置いています。AngularJS が残りの重い作業を行います。

これはすべて少し難解に聞こえるかもしれませんので、AngularJS の方法で解決された問題を次に示します (モデルは変更されず、テンプレートのみが変更されます)。

<ul>
<li ng-repeat="phone in phones" ng-mouseenter="showView=true" ng-mouseleave="showView=false">
  {{phone.name}}
  <p>{{phone.snippet}}</p>
  <p class="butt-view" ng-show="showView">View</p>
</li>
</ul>

DOM要素に ID を追加する必要も、 JavaScript コードを記述する必要もありません。これにより、14 行の JavaScript コードを削除し、jQuery への依存を完全に取り除くことができます。甘いですね。

最後に、動作中の jsFiddle を次に示します: http://jsfiddle.net/GBwLN/4/

于 2012-11-24T20:28:15.660 に答える
6

次のコードを置き換えるだけで、新しい jQuery メソッドによって導入されたより優れたアプローチであるevent delegationを使用します。.on()

$("#orders ul li").hover(
        function() {
            $(this ).find(".butt-view").show();
        },
        function() {
            $(this ).find(".butt-view").hide();
        });

これについて：

$("#orders").on('mouseenter mouseleave', 'li', function(event) {
     if (event.type == 'mouseenter') {
         $(this ).find(".butt-view").show();
     } else  {
         $(this ).find(".butt-view").hide();
     }
});

このようにして、個々の要素で#ordersはなく、イベント ハンドラーを div にアタッチします。このアプローチはより効率的で、動的に追加された新しい li に対して機能します。lili#orders

ちなみに、 私の意見では、mouseenter mouseleave同等で読みやすいイベントを使用しています。hover

于 2012-11-24T17:48:35.363 に答える
1

イベント委任を使用する必要がありますが、ディレクティブを使用してこれを実現することもできます。

HTML:

<li ng-repeat="phone in phones" awesome-item>
  {{phone.name}}
  <p>{{phone.snippet}}</p>
  <p class="butt-view">View</p>
</li>

指令：

angular.module('darthvader', [])
  .directive('awesomeItem', function() {
    return function($scope, element, attrs) {
        element.hover(function() {
            $(this).find(".butt-view").show();
        },
        function() {
            $(this).find(".butt-view").hide();
        });
    };
  });
于 2014-10-15T20:27:58.710 に答える