angularjs: инъекция async-сервиса в директиву с $ resource

Question

Я очень стараюсь, чтобы моя голова была вокруг angularJS и директив.

У меня есть существующие службы REST, который выводит данные в формате JSON следующим образом (отформатированные для удобства чтения):

{"ApplicationType": 
    ["Max","Maya","AfterEffects","Nuke","WebClient","Other"], 
"FeatureCategory": 
    ["General","Animation","Compositing","Management","Other"], 
"FeatureStatus": 
    ["Completed","WIP","NotStarted","Cancelled","Rejected","PendingReview"], 
"BugStatus": 
    ["Solved","FixInProgress","NotStarted","Dismissed","PendingReview"]} 

Я тогда услугу (который, кажется, работает правильно), чтобы получить эти данные, которые я хочу вводите в мою директиву.

(function() { 
'use strict'; 

var enumService = angular.module('enumService', ['ngResource']); 

enumService.factory('Enums', ['$resource', 
function ($resource) { 
    return $resource('/api/Enums', {}, { 
     query: { method: 'GET', cache: false, params: {}, isArray: false } 
    }); 
} 
]); })(); 

Мои намерения использовать данные из ответа JSon связываться с селектором HTML «Параметры» для целей сохранение данных в соответствии между кодом позади REST службы и угловой (то есть. Данные в формате JSON является . описания сильно типизированных данных модели из C#, например Enum.GetNames (TypeOf (ApplicationType)))

projMgrApp.directive('enumOptions', ['Enums', 
function (Enums) { 
    return { 
     restrict: 'EA', 
     template: '<option ng-repeat="op in options">{{op}}</option>', 
     scope: { 
      key: '@' 
     }, 
     controller: function($scope) { }, 
     link: function (scope, element, attrs) { 
      scope.options = Enums.query(function (result) { scope.options = result[scope.key]; }); 
     } 
    }; 

} 
]); 

предполагаемое использование было бы использовать следующим образом:

<label for="Application" class="control-label col-med-3 col">Application:</label> 
       <select id="Application" class="form-control col-med-3 col pull-right"> 
        <enum-options key="ApplicationType"></enum-options> 
       </select> 

, который затем выдает все варианты, соответствующие моим перечням C#.

В этом случае представляется, что директива никогда не вызывается при использовании тега.

Примечание. Я предполагаю, что завод работает нормально, так как я могу ввести его в отдельный контроллер, и он работает так, как ожидалось.

Answer 1

Если вы получите попробовать baddir ошибки переименовать имя директивы для enumOptions согласно doc (не забудьте инъекции):

This error occurs when the name of a directive is not valid. 

Directives must start with a lowercase character and must not contain leading or trailing whitespaces. 

Answer 2

1) Я думаю projMgrApp является основным модулем. Включили ли вы enumService в зависимость от этого модуля?

angular.module('projMgrApp',['enumServices']) 

В противном случае ваш основной модуль не будет знать о существовании вашего сервиса.

2) Знаете ли вы, как декларируются и используются директивы. Когда вы объявляете

projMgrApp.directive('EnumOptions', ['Enums', function (Enums) {}])

на самом деле должны быть использованы в HTML коде, как:

<enum-options></enum-options> 

Я не совсем уверен, о названии, но она должна начинаться с буквы в нижнем регистре, как enumOptions

3) Я не знаю, почему вы используете этот ключ в качестве атрибута. Вы не обрабатываете его вообще. scope.key не будет работать. Вы либо должны разбирать атрибуты в функции ссылок (link: function(scope, element, attributes)), либо создавать изолированную область действия для этой директивы.

Добавить в собственность возвращения объекта следующее:

scope : { 
    key:'@' //here depends if you want to take it as a string or you will set a scope variable. 
} 

После того как вы это, вы можете использовать его в функции связи, как вы сделали (scope.key).

Edit:

Вот рабочая версия похожа (не оптимизированы и не использовать HTTP вызовы), что вы хотите достичь. Скажи мне, если я что-то упустил. Working example

Answer 3

Благодаря предложениям Текса я смог полностью функционировать так, как предполагалось. Это означает, что мои теги/директивы angularJS + HTML полностью привязаны к моим перечислениям API. Я знаю, что мне нужна корректировка, добавляя к ним время от времени на основе отзывов пользователей, плюс я использую эти перечисления для представления строго типизированных данных по всему приложению. Таким образом, это будет большая экономия времени и поможет уменьшить повторение кода. Спасибо всем, кто помог!

Ниже приведена приведенная ниже служба и директива, если другие люди, начиная с Углового, сталкиваются с подобными проблемами или имеют схожие требования.

Услуги:

(function() { 
'use strict'; 

var enumService = angular.module('enumService', []) 

.service('Enums', ['$http', '$q', function ($http, $q) { 
    return { 
     fetch: function() { 
      var defer = $q.defer(); 
      var promise = $http.get("/api/Enums").then(function (result) { 
       defer.resolve(result); 
      }); 
      return defer.promise; 
     } 
    } 
}]);})(); 

Директива:

angular.module('projMgrApp').directive('enumOptions', ['Enums', function (Enums) { 
    return { 
     restrict: "EA", 
     scope: { 
      key: "@" 
     }, 
     template: "<select><option ng-repeat='enum in enumIds' ng-bind='enum'></option><select>", 
     link: function (scope) { 
      Enums.fetch().then(function (result) { 
       scope.enumIds = result.data[scope.key]; 
      }); 
     } 
    }; 
}]);