使用 Angular js 将工厂注入控制器

Question

我正在努力更深入地了解工厂和构造函数。但是，我对将实例放在哪里以及如何将它们打印出来有点困惑。我回来了 盘子没有定义。

这是我如何配置我的 js 文件

var app = angular.module('dinerApp', ['ngRoute']);
app.config(function($routeProvider){
  $routeProvider.when('/basque',{
    templateUrl:"./client/app.html",
    controller: 'AppCtrl'
  })
  .when('/menu',{
    templateUrl:"./client/menu.html",
    controller:'MenuCtrl'
  })
  .otherwise({
    redirectTo: '/basque'
  });
});

这是我的工厂，我在工厂中放置了构造函数及其原型。我正在制作一份基本的餐厅菜单。

app.factory('diner', function($q,$http){

  var Plate = function(name, description, price, ingredients){
    this.name = name;
    this.description =description;
    this.price = price;
    this.ingredients = ingredients; 
  };

  Plate.prototype.toString= function(){
    var returnString='' ;
    returnString += "name" + this.name + "\n" +
    "description: " + this.description + "\n" +
    "price: " + this.price + "\n";

    return returnString;
  };

  return Plate;
})

下面是我的控制器。我创建了几个实例。

app.controller('MenuCtrl',function($scope,diner){

var steakSandwich= new diner.Plate('Steak Sandwich', 'Something nice and tasty', 11.75);
var lambShoulderSteak = new Plate('Lamb Shoulder Steak','Something Different', 11.75);
var lambChops = new Plate('Lamb Chops', 'why not', 14.75);
var chickenSandwich = new Plate('chicken Breast Sandwich', 'basque chicken on a bun',9.75);
var basqueBurger = new Plate('Basco Burger', 'a better burger', 9.75);

$scope.plates = diner.Plate;
});  

在我的 html 中，我最好调用 ng-repeat

<ul ng-repeat="plate in plates"> 
  <li>{{plate.name}} </li>
  <li>{{plate.description}}</li>
  <li>{{plate.price}}</li>
</ul>

Answer 1

迪伦是对的。你搞砸了你工厂的命名空间。获取适当的对象并将它们放在这样的范围内。

working plunkr of your factory

app.factory('Plate', function(){

  var Plate = function(name, description, price, ingredients){
    this.name = name;
    this.description =description;
    this.price = price;
    this.ingredients = ingredients; 
  };

  Plate.prototype.toString= function(){
    var returnString='' ;
    returnString += "name" + this.name + "\n" +
    "description: " + this.description + "\n" +
    "price: " + this.price + "\n";

    return returnString;
  };

  return Plate;
})

app.controller('MainCtrl', function($scope, Plate) {
  var steakSandwich= new Plate('Steak Sandwich', 'Something nice and tasty', 11.75);
  var lambShoulderSteak = new Plate('Lamb Shoulder Steak','Something Different', 11.75);
  var lambChops = new Plate('Lamb Chops', 'why not', 14.75);
  var chickenSandwich = new Plate('chicken Breast Sandwich', 'basque chicken on a bun',9.75);
  var basqueBurger = new Plate('Basco Burger', 'a better burger', 9.75);
  var diner = [];
  diner.push(steakSandwich, lambShoulderSteak,lambChops,chickenSandwich,basqueBurger);

  $scope.plates = diner;

  angular.forEach(diner, function (plate) {
    console.debug(plate.toString());
  });

});

检查控制台以检查您的 toString()。

Answer 2

您从工厂返回Plate，因此diner 是Plate，它没有属性Plate。您应该调用 factory "Plate" 并直接对其进行新建，或者返回具有 Plate 属性的对象。