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

ここで私は（ページのロードに）年のためのAPI呼び出しを作りたいです。メイクの更新オプションの年末年始は です。

Answer 1

角度サービスでオプションを取得する必要があります。角度サービスは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 2

使用すると、AJAX呼び出しを作るために$ HTTPを使用することができます。あなたはそれを使用するためにそれを注入する必要があります。より良い解決策は、サービスコールを工場/サービスに移動することです。

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