Angular和JQuery之间的执行时间

Question

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

例如，我打电话$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语句？

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