Question

我不能为我的生活串起一套正确的工厂，控制器和指令来实现这一目标。好像它应该很简单......

给出一些html：

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

我希望AngularJS获取该产品的xml，填写模板，并在页面上填充新的HTML。

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

我是Angular的新手，我完全失去了。我已经通过各种方式完成了文档，完成了演示并在此处阅读了100篇帖子。我显然没有得到什么。

感谢您提供的任何指导。

Answer 1

$ injector错误是由于ngResource位于一个单独的文件中，您需要将其作为参考（ng-resource.js）包含在内，并在模块声明中指定为依赖项：angular.module('docsSimpleDirective', ['ngResource'])。

工作代码如下，其中prodDetails工厂的返回值是硬编码的，因为没有指定网址。

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

如何在AngularJS指令中调用外部XML数据？

1 个答案: