2

問題は、バックアップされた（JSPページ）からデータを取得するための簡単なディレクティブがあることです（これには、angularからjsモデルにいくつかの値を設定する呼び出し関数がありますが、応答を取得すると、呼び出し関数はx回です....

ここにサンプルがあります

http://plnkr.co/edit/OISkbF

コンソールログが表示され、「Load form JSP」ボタンをクリックすると、

最初はメソッドを 3 回呼び出し、次は 6 回...

ここにGoogleグループangularJSのトピックがあり ますhttps://groups.google.com/d/msg/angular/18a_Iqkdbtk/eDuZ4OLfwJMJ

4

1 に答える 1

2

私はあなたの例でいくつかのことを修正しました.今では関数を2回呼び出すだけです.

プランカーの作業フォーク: http://plnkr.co/edit/Aw6S6T?p=preview

重要な部分は次のとおりです。

app.directive('angularHtmlBind', function($compile, $http) {
return function(scope, elm, attrs) {
    var $elm = $(elm),
        url = 'search.jsp',
        html,
        currentScope;

    function getHTML(url) {
      $http.get('search.jsp').success(function(data) {
        html = data;
        currentScope = scope.$new();
        $elm.html(html);         
        $compile($elm.contents())(currentScope);       
        }).error(function(data, status, headers, config) {    
            console.log(data);
        }); 
    }        
    scope.$watch(attrs.shown, function(value) {                           
      if (value) {            
        getHTML(url);            
      } else if (currentScope) {            
        $elm.contents().remove();            
        currentScope.$destroy()            
      }          
    });
};
});

実装には 2 つの問題がありました。

  1. $httpを呼び出して、以下の行の結果を期待します。これは非同期呼び出しであるため、$compileを成功ハンドラーに移動しました。
  2. jspファイルがロードされるたびに同じスコープを再利用するため、同じオブジェクトを新しく作成されたコントローラーに渡します（ $compile するたびに、コントローラーの新しいインスタンスが作成されます）。各jspファイルに新しいスコープを作成し、使用されなくなったら破棄しています。

もちろん、この例はさらに改善された可能性がありますが、問題を説明するためだけにサンプル ファイルを複数回ロードすることを想定しています;) そうでない場合は、一度呼び出してから、コンテンツを格納するhtml var を使用します。

于 2012-11-29T17:10:37.997 に答える