Angular Js : How To Make Make Ajax Call For Directives To Create Options

I created directives for form controls. There are some controls those will have options from ajax[API] call. I am stuck here how to make ajax call over directives. function se

Solution 1:

What you can do for this is better to have a ng-change event directive on the year element and in the controller you can use to have an array which holds all the make happened in that year:

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(functionsuccess(response) {
              $scope.o.makes = response.data; // <---put actual data here
            },
            functionerror(e) {
              console.error(e);
            });
      }
    };
  }
]);

<divng-app='yourApp'ng-controller='yourController'><selectng-model='year'ng-change='o.getMake(year)'><option>1990</option><option>1991</option></select><selectng-model='make'ng-options='make as make.make for make in o.makes track by make.make'><option>Make...</option></select></div>

Solution 2:

You should get the options by angular service. The angular service will send the AJAX call and return the result (and even some default data in case of failure).

How to do it? Here is an example:

var app = angular.module('app',[]);
//Service
app.factory('myService', function(){
  functiongetOption() {
      return'getOption';
  }
  return {
      getOption: getOption
  }
});

app.directive('myDirective', ['myService',function(myService){
  return {
    template: '<h1>{{name}}</h1>'link: function (scope, element, attrs) {
        scope.name = myService.getOption();
    }
  }
}]);

Solution 3:

Use can use $http to make ajax call. You need to inject it to use it. Better solution is to move the service calls to factory/service.

functionselectControlDir($http)
{
    return {
        transclude: true,
        restrict: 'E',
        scope: {
            data: '=data'
        },
        template: "<div ng-transclude></div><label>{{data._text}} </label

> ><select type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' >\n\ <option ng-repeat='ans in
> data._answerOptions'>{{ans._promptText}}</option></select>"

        ,
        link: function (scope, element, attrs)
        {
            // $http.post(url, options); => make your call here    //console.log("scope.data.QuestionData", scope.data.QuestionData);
        }
    };
}

Solution 4:

The best way is to create a service or a factory and inject it into your directive.

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

You can use it in your link or in controller statement.

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