Angular js：如何使指令的ajax调用来创建选项

我为表单控件创建了指令。 有一些控件可以从ajax [API]调用中获得选项。

我被困在这里如何通过指令进行ajax调用。

function selectControlDir() { return { transclude: true, restrict: 'E', scope: { data: '=data' }, template: "
{{data._text}} \n\ {{ans._promptText}}" , link: function (scope, element, attrs) { //console.log("scope.data.QuestionData", scope.data.QuestionData); } }; } 

完整代码的plunker http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview

在这里，我想对年份进行api调用（在页面加载时）。 年份更改Make的更新选项。

Answer 1

你可以为此做的最好是在year元素和控制器上有一个ng-change事件指令，你可以使用一个数组来保存当年发生的所有make：

 var app = angular.module('yourApp', []); app.controller('yourController', ['$scope', '$http', function($scope, $http) { $scope.o = { makes: [{make:'Make1'}, {make:'Make2'}], // <---just for demo getMake: function(year) { $http.post(url, { year: year // <----pass the year to backend as year like : { year:1990 } }) .then(function success(response) { $scope.o.makes = response.data; // <---put actual data here }, function error(e) { console.error(e); }); } }; } ]); 

 
  1990 1991   Make...   

Answer 2

您应该通过角度服务获得选项。 角度服务将发送AJAX调用并返回结果（甚至在发生故障时返回一些默认数据）。

怎么做？ 这是一个例子：

 var app = angular.module('app',[]); //Service app.factory('myService', function(){ function getOption() { return 'getOption'; } return { getOption: getOption } }); app.directive('myDirective', ['myService',function(myService){ return { template: '
{{name}}
' link: function (scope, element, attrs) { scope.name = myService.getOption(); } } }]); 

Answer 3

使用可以使用$ http来进行ajax调用。 你需要注入它才能使用它。 更好的解决方案是将服务调用转移到工厂/服务。

 function selectControlDir($http) { return { transclude: true, restrict: 'E', scope: { data: '=data' }, template: "
{{data._text}}  >\n\ {{ans._promptText}}" , link: function (scope, element, attrs) { // $http.post(url, options); => make your call here //console.log("scope.data.QuestionData", scope.data.QuestionData); } }; } 

Answer 4

最好的方法是创建服务或工厂并将其注入您的指令 。

 app.service("serviceName", ["$http", function($http) { return { getData: function(configObject) { // $http.get(..., post... etc } } }]); 

您可以在链接或控制器语句中使用它。

 selectControlDir(serviceName) { return{ ... link: function() { selectControlDir.getData({ url: ..., getParam1: 123}) } ... or ... controller: function() { selectControlDir.getData({ url: ..., getParam1: 123}) } } }