angularjs: injecting async service into directive with $resource

Question

I'm very much trying to get my head around angularJS and directives still.

I have an existing REST service that outputs JSON data as follows (formatted for readability):

{"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"]}

I then have a service (which appears to be working correctly) to retrieve that data that I wish to inject into my directive.

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

My intentions are to use the data from the json response to bind to html selector 'options' for the purposes of keeping the data consistent between the code behind REST service and the angular ( ie. the json data is describing strongly typed model data from c# eg. 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]; });
        }
    };

}
]);

the intended usage would be to use as follows:

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

which would then produce all of the options consistent with my c# enums.

In this case it appears the directive is never being called when the tag is used.

Note. I assume the factory is working fine, as i can inject it into a separate controller and it works as anticipated.

Failed to instantiate module projMgrApp due to: Error: [$compile:baddir] errors.angularjs.org/1.5.0/$compile/baddir?p0=Enum... at Error (native) at localhost:3240/lib/angular/angular.min.js:6:416 — xxdefaultxx
– xxdefaultxx, Commented Feb 17, 2016 at 8:16
docs.angularjs.org/error/$compile/baddir Directives must start with a lowercase character and must not contain leading or trailing whitespaces. — AlainIb
– AlainIb, Commented Feb 17, 2016 at 8:18
that does stop the error from being generated (thanks!), though it doesnt return the options.. that is neither the array that was intialized when scope was declared, or the array returned from the REST — xxdefaultxx
– xxdefaultxx, Commented Feb 17, 2016 at 8:22
can you edit this function and past what is logged ? scope.options = Enums.query(function (result) { console.log(JSON.stringify(result, undefined, 2)); scope.options = result[scope.key]; }); — AlainIb
– AlainIb, Commented Feb 17, 2016 at 8:29

Tek · Accepted Answer · 2016-02-17 10:30:47Z

1

1) I guess projMgrApp is the main module. Have you included enumService as dependency to this module?

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

Otherwise your main module won't be aware of the existence of your service.

2) Are you aware how the directives are declared and used. When you declare

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

actually should be used in the html code as:

<enum-options></enum-options>

I m not quite sure about the name but it should start with lowercase letter like enumOptions

3) I don't know why you use this key as attribute. You don't process it at all. scope.key won't work. You either have to parse the attributes in link function (link: function(scope, element, attributes)) or create isolated scope for the directive.

Add as property of the return object the following:

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

After you have this , you can use it in the link function as you did (scope.key).

Edit:

Here is a working version similar (optimized no to use http calls) to what you want to achieve. Tell me if I'm missing anything. Working example

edited Feb 17, 2016 at 10:30

answered Feb 17, 2016 at 8:32

Tek

1,1982 gold badges12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

xxdefaultxx Over a year ago

ok, 1 and 2 i was aware of ( though admittedly i had missed the <enum-options> tag capitalization ( a symptom of being 2 days into angular and absorbing a tonne of info v. quickly I presume ).

xxdefaultxx Over a year ago

I have adjusted the points you made in 3), however, im still obviously missing something as its getting no return.

xxdefaultxx Over a year ago

Ive updated the code in the main post to reflect the changes.

Tek Over a year ago

Can you somehow show the whole project. Also it will be really nice to display all the errors you receive!

Tek Over a year ago

Also I suggest to use $http.

AlainIb · Accepted Answer · 2016-02-17 08:22:43Z

0

If you get the baddir error try to rename your directive name to enumOptions according to the doc (don't forget the injection):

 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.

answered Feb 17, 2016 at 8:22

AlainIb

4,6157 gold badges42 silver badges67 bronze badges

1 Comment

xxdefaultxx Over a year ago

thanks. that does help as it stops the error from being generated.. However, its not returning the options ( with no error being generated ). That is neither the array that was intialized when scope was declared, or the array returned from the REST

xxdefaultxx · Accepted Answer · 2016-02-17 12:41:47Z

0

Thanks to Tek's suggestions I was able to get this fully functioning as intended. Which means now my angularJS + HTML select tags/directives are completely bound to my APIs enums. I know down the line that I am going to be needing to adjust add to these occasionally based on user feedback, plus I use these enums to represent strongly typed data all over the app. So it will be a big time saver and help reduce code repetition. Thanks to everyone that helped!

The service and directive that I used is copied below, in case other people starting out with Angular run into similar issues or have similar requirements.

Service:

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

Directive:

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

edited Feb 17, 2016 at 12:41

answered Feb 17, 2016 at 9:36

xxdefaultxx

1751 silver badge12 bronze badges

3 Comments

Tek Over a year ago

I see you point with the select but I think it will be better to include the select into the directive itself.

Tek Over a year ago

What errors do you see and what do you want to achieve?

xxdefaultxx Over a year ago

No errors. The directive isn't called from an options tag. Ive put it on a select and now it is calling so i intend to build the template with a stringbuilder or whatever the equivalent is in javascript.

Collectives™ on Stack Overflow

angularjs: injecting async service into directive with $resource

3 Answers 3

5 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related