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

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事件指令，在控制器中你可以使用一个数组来保存那一年发生的所有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);
            });
      }
    };
  }
]);

<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>

Answer 2

您应该通过角度服务获得选项。 Angular 服务会发送 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: '<h1>{{name}}</h1>'
    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: "<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);
        }
    };
}

Answer 4

最好的方法是创建一个服务或一个工厂并将它注入到你的指令中。

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

您可以在 link 或 controller 语句中使用它。

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