Question

我正在努力深入了解工厂和施工人员。然而，我有点困惑，关于在何处放置实例以及如何将它们打印出来。我回来了Plate没有定义。

以下是我配置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

您正在从工厂返回Plate，因此diner为Plate，但它没有属性Plate。您应该调用factory“Plate”并直接新建，或者返回一个Plate属性的对象。

Answer 2

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

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（）。

使用角度js将工厂注入控制器

2 个答案: