How-to call for external XML data within an AngularJS directive?

Question

I can not for the life of me string together the right set of factories, controllers and directives to get this to work. Seems as if it should be simple...

Given some html:

<productcard product="12345"></productcard>

I'd like AngularJS to grab the xml for that product, fill in the template, and plop the new HTML on the page.

http://plnkr.co/edit/k8fpHbliYTGUv78YcDYI?p=preview

.factory('prodDetails', function($resource) {
   return $resource(':id', { id: '@productId' }, { responseType: "xml" });
})
.controller('prodDetailsCtrl', function($scope, prodDetails){
  //prodDetails.get({productId: 35990});
  //console.log("blah");
})
.directive('productcard', function(){
  return {
    scope: {
      productId: "@"
    },
    link: function(scope, iElement, iAttrs) {
      //$scope.blah = prodDetails.query({magId : 12345});
      //prodDetails.get({productId: 35990})
    },
    replace: true,
    template: '{{productId}}'
  };
});

I'm really new to Angular and am at a complete loss. I've been through the docs every which way, done the demos and read 100s of posts here on SO. I'm clearly not getting something.

Thanks for any guidance you might provide.

How-to call for external JSON vs. I'd like AngularJS to grab the xml Is it XML or JSON? And what's the problem you are facing? — a better oliver
– a better oliver, Commented Sep 11, 2014 at 13:31
directive scope is expecting attribute product-id but markup is product — charlietfl
– charlietfl, Commented Sep 11, 2014 at 13:36
Oops. I thought it was JSON. It's actually XML. I can't quite get to that part, though. I have the factory and controller set up, but I'm getting an error ($injector:unpr) that I don't understand and it's stopping me from even experimenting with the returned data. — nathanziarek
– nathanziarek, Commented Sep 11, 2014 at 13:36
@charlietfl I don't see this error anywhere...I'd love if this were just a typo! — nathanziarek
– nathanziarek, Commented Sep 11, 2014 at 14:13
productId: "@" implies attribute product-id, markup is product="1234" — charlietfl
– charlietfl, Commented Sep 11, 2014 at 14:17

Steve Lang · Accepted Answer · 2014-09-11 17:29:35Z

The $injector error is due to ngResource being in a separate file that you need to include as a reference (ng-resource.js) and also specify as a dependency in the module declaration: angular.module('docsSimpleDirective', ['ngResource']).

The working code is as follows, where the return value of the prodDetails factory is hardcoded, since a url wasn't specified.

.factory('prodDetails', function() {
   //return $resource(':id', { id: '@productId' }, { responseType: "xml" });
   return { 
     get: function (obj) {
       return {
        id: obj.productId,
        name: 'Awesome Product',
        desc: 'A very awesome product'
       };
     }
   };
})
.directive('productcard', function (prodDetails) {
  return {
    restrict: 'E',
    scope: {
      productId: '@'
    },
    link: function (scope, element) {
      var x = prodDetails.get({ productId: scope.productId});
      element.html('<strong>' + x.id + ', ' + x.name + '</strong>');
    }
  };
});

Collectives™ on Stack Overflow

How-to call for external XML data within an AngularJS directive?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related