javascript - Angular js : How to make make ajax call for directives to create options

Question

我为表单控件创建了指令。 有些控件将具有来自 ajax[API] 调用的选项。

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

    function selectControlDir()
    {
        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)
            {
                //console.log("scope.data.QuestionData", scope.data.QuestionData);
            }
        };
    }

Plunker 获取完整代码 http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview

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

Answer 1

为此，您可以做的最好是在 year 元素上设置一个 ng-change 事件指令，并在 Controller 中使用一个数组来保存所有的事情都发生在那一年:

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

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