Angular和JQuery之間的執行時間

我有一個通過Angular動態填充的頁面。實質上，Angular向後端發出$http.get請求以獲取數據並填充控制器的屬性。Angular和JQuery之間的執行時間

例如，我打電話$http.get('/_car_data')和返回的JSON被保存到我的控制器Dealership作爲Dealership.cars。

通過Angular，我輸出所有的Dealership.cars作爲輸入框在我的html頁面。

我的問題是，我想爲每個輸入添加一個jquery'autocomplete'。如果我在頁面和角度已完全呈現後通過Google Developer控制檯執行此操作，則此功能非常好。但是，如果我在將腳本鏈接到html之後並在html正文之後包含此功能，則它不起作用。如果我用$(document).ready包圍此自動完成功能，它也不起作用。

這是在谷歌開發者控制檯中運行時完美運行的函數，但不包括在外部鏈接的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語句？

來源

2016-10-10 beckah

你必須以angularjs的方式做到這一點。也就是說，有指令。 –

問題和思考是錯誤的。你需要在指令中調用插件。然後你放心元素存在 – charlietfl

嘗試使用link函數Agular docs。當你的組件的html模板被編譯並且你的Element仍然沒有鏈接到真正的DOM時，這個函數被觸發。所以你可以嘗試用jQuery自動完成來操縱這個元素。

來源

2016-10-10 15:59:27

jQuery應該與angularjs交流的最好和獨特的方式是通過指令。我建議你避免任何形式的快捷方式和黑客入侵，只需一點點代碼就會變成真正的混亂。

這裏是我對如何解決問題的理解。

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 
        }); 
      }); 
     } 
    }; 
});

來源

2016-10-10 16:00:52

不是什麼大不了，但FYI'元素'已經是jQuery，如果jQuery.js包含在頁面之前angular.js – charlietfl

我讓'element'由jquery的函數包裝的原因是因爲它更通用並清楚代碼中發生了什麼。儘管元素已經可以被jQuery包裝了，但它不會引起任何問題，對吧？因爲jQuery在他的內部處理它。但是，無論如何，謝謝你指出我們通常不會注意到的一個好事實。 –

沒有問題，有些人可能不會在angular.js之前包含它。它和'$（$（selector））'是一樣的。但是，如果所有配置正確，只需執行'element.pluginName（）' – charlietfl

Angular和JQuery之間的執行時間

回答

相關問題