Question

我有一个通过Angular动态填充的页面。实质上，Angular向后端发出$http.get请求以获取数据并填充控制器的属性。

例如，我调用$http.get('/_car_data')并且返回的JSON将作为Dealership保存到我的控制器Dealership.cars中。

通过Angular，然后我在html页面中输出所有Dealership.cars作为输入框。

我的问题是我想添加一个jquery＆＃39; autocomplete＆＃39;每个输入。如果我在页面和角度完全呈现之后通过Google Developer控制台执行此操作，则效果非常好。但是，如果我在脚本链接到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和Angular创建的，动态加载的内容完成呈现以执行我的jquery语句？

Answer 1

尝试使用link函数Agular docs。当编译组件的html模板并且Element仍未链接到真实DOM时，将触发此函数。因此，您可以尝试使用jQuery自动完成操作此元素。

Answer 2

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

Angular和JQuery之间的执行时间

2 个答案: