AngularとJQueryの実行時間

Question

私は、Angularを使用して動的に読み込まれたページを持っています。本質的に、Angularは、コントローラのデータを取得して属性を取り込むために、バックエンドに対して$http.get要求を行います。

たとえば、私は$http.get('/_car_data')を呼び出し、返されたJSONはDealershipのDealership.carsというコントローラに保存されます。

Angularを使用して、すべてDealership.carsを入力ボックスとしてHTMLページに出力します。

私の問題は、各入力にjquery 'autocomplete'を追加したいということです。これは、ページと角度が完全にレンダリングされた後、Googleデベロッパーコンソールで操作すると美しく機能します。ただし、スクリプトがHTMLにリンクされた後、およびHTMLの本文の後にこの機能を両方含めると、機能しません。このオートコンプリート機能を$(document).readyで囲んでも機能しません。

これは、Google開発者向けコンソールで実行すると完全に機能しますが、外部リンクされたjsとhtmlボディの後には含まれません。

$(document).ready(function() { 

     var availableTags = []; 

     $.ajax({ 
       url: '_available_cars', 
       data: {}, 
       method: 'GET', 
       dataType: 'json', 
       success: function(data) { 
        availableCars = data['cars']; 

        $(".carchoice").autocomplete({ 
         source: availableCars 
        }); 
       }, 
       error: function(jqXHR, textStatus, errorThrown, data) { 
        console.log(textStatus, errorThrown); 
       } 
     }); 
}); 

だから私の質問は、どのように私はすべてのhtmlまで待たないとアンギュラ作成され、動的にロードされたコンテンツは、私のjqueryの文を実行するためにレンダリング終了しますか？

Answer 1

linkファンクションAgular docsを使用してください。この関数は、コンポーネントのhtmlテンプレートがコンパイルされ、要素が実際のDOMにまだリンクされていない場合にトリガーされます。したがって、jQueryオートコンプリートでこの要素を操作しようとすることができます。

Answer 2

jQueryがangularjsとcomunicateする最良のユニークな方法は、ディレクティブによるものです。どんな種類のショートカットやハックも避けることをお勧めします。ちょっとしたコードで本当の混乱に変わります。

ここでは、あなたの問題をどのように解決できるかを示します。

angular.module('myApp', []); 

angular.module('myApp').factory('CarService', function ($http, $q) { 
    var cars = []; 

    return { 
     getAvailableCars: function() { 
      if(cars) return $q.resolve(cars); 

      return $http.get('_available_cars').then(function (response) { 

       cars = response.data; 

       return cars; 
      }); 
     } 
    }; 
}); 

angular.module('myApp').directive('carchoice', function(CarService) { 
    return { 
     restrict: 'C', 
     link: function(scope, element, attrs) { 

      CarService 
       .getAvailableCars() 
       .then(function (availableCars) { 

        $(element).autocomplete({ 
         source: availableCars 
        }); 
      }); 
     } 
    }; 
});