Question

我正在开发一个AngularJs项目，用户可以在其中选择多种成分。这些成分属于不同的类别，我将其硬编码到模型中，并用作下拉列表来过滤视图中的结果。为了向控制该视图的控制器提供所有类别列表，我创建了许多CategoryFactories。

它们如下：DishCategoryFactory.js，IngredientCategoryFactory.js

我还有一个工厂，它从$ http电话（IngredientFactory.js）中引入了完整的成分列表。在我的视图的控制器中，IngredientCategoryFactory和IngredientFactory都没有提供我需要的列表，但DishFactory是。我确信我缺少一段关键代码，但我无法弄清楚它在哪里。

我的所有工厂都被正确定义为范围并注入控制器。这些工厂的路径在我的index.html文件中列出。我将包含我的代码，希望有人能够指出我的错误。

的index.html：

 <!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Water App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link href="styles/app.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/createDish.css">
    <!-- endbuild -->
  </head>
  <body ng-app="WaterApp">
    <ng-include src='views/partials/navbar.html'></ng-include>
    <ng-view></ng-view>
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->




    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../bower_components/angular-animate/angular-animate.js"></script>
    <script src="../bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="../bower_components/angular-resource/angular-resource.js"></script>
    <script src="../bower_components/angular-route/angular-route.js"></script>
    <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="../bower_components/angular-touch/angular-touch.js"></script>
    <script src="../bower_components/lodash/dist/lodash.compat.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- app files -->
    <!-- build:js({.tmp,app}) scripts/scripts.js -->
      <script src="scripts/app.js"></script>
      <script src="scripts/constants.js"></script>
      <script src="scripts/routes.js"></script>

      <!-- controllers -->
      <script src="scripts/controllers/navbar.controller.js"></script>
      <script src="scripts/controllers/login.controller.js"></script>
      <script src="scripts/controllers/user.controller.js"></script>
      <script src="scripts/controllers/createUsers.controller.js"></script>
      <script src="scripts/controllers/home.controller.js"></script>
      <script src="scripts/controllers/dish.controller.js"></script>
      <script src='scripts/controllers/createDish.controller.js'></script>
      <script src="scripts/controllers/ingredient.controller.js"></script>

      <!-- services -->
      <script src="scripts/services/auth.factory.js"></script>
      <script src="scripts/services/user.factory.js"></script>
      <script src="scripts/factories/IngredientFactory.js"></script>
      <script src="scripts/factories/DishFactory.js"></script>
      <script src="scripts/factories/IngredientCategoryFactory.js"></script>
      <script src="scripts/factories/DishCategoryFactory.js"></script>

      <!-- directives -->
      <script src="scripts/directives/modal.directive.js"></script>
    <!-- endbuild -->
</body>
</html>

app.js：

'use strict';
angular
  .module('WaterApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ]).run(function(
    $rootScope,
    $location,
    $http,
    $window,
    AuthFactory,
    UserFactory,
    DishFactory,
    IngredientFactory,
    IngredientCategoryFactory,
    DishCategoryFactory
  ) {
  $rootScope.$on('$routeChangeStart', function(event, next) {
    if($location.path() === '/createUsers'){

    } else if (AuthFactory.isAuthenticated()) {
      $http.defaults.headers.common.Authorization = 'Token token=' + $window.sessionStorage.getItem('WaterApp.user');
      UserFactory.fetch();
    } else {
      $location.path('/login');
    }
    DishFactory.fetch();
    IngredientFactory.fetch();

  });
});

createDish.html：

  <ng-include src="'views/partials/navbar.html'"></ng-include>
<div class="container">
  <div ng-controller="CreateDishCtrl">
    <form role="form" name="createDishForm" ng-submit="createDish(dish)">
      <div class="form-group" ng-model="dishCategory">
        <select>
          <option ng-repeat="dish_category in dish_categories">{{dish_category}}</option>
        </select>
      </div>
      <div class="form-group">
        <select ng-model="IngredientCategory">
          <option ng-repeat="ingredient_category in ingredient_categories">{{ingredient_category}}</option>
        </select>
      </div>
      <div class="form-group">
        <select ng-model="IngredientSubCategory">
          <option ng-repeat="ingredient_sub_category in ingredient_sub_categories">{{ingredient_sub_category}}</option>
        </select>
      </div>
      <div class="form-group">
        <div class="checkbox" ng-repeat="ingredient in ingredients | filter: {category:IngredientCategory} | filter: {sub_category:IngredientSubCategory}">
          <label>
            <input type="checkbox" value="{{ ingredient.id }}" ng-checked="hasIngredient(ingredient)" ng-model="ingredient.checked">{{ingredient.name}}
          </label>
        </div>
      </div>
      <div class="form-group">
        <input class="btn" type="submit" class="btn btn-primary" value="Submit">
      </div>
    </form>
  </div>
</div>

createDish.controller.js：

    'use strict';
angular.module('WaterApp').controller('CreateDishCtrl',['$scope','$location','$http','IngredientFactory','IngredientCategoryFactory', 'DishCategoryFactory', function($scope, $location, $http, IngredientCategoryFactory, IngredientFactory, DishCategoryFactory) {

  $scope.dish_categories = DishCategoryFactory.categories;
  $scope.ingredients = IngredientFactory.ingredients;
  $scope.ingredient_categories = IngredientCategoryFactory.categories;
  $scope.ingredient_sub_categories = IngredientCategoryFactory.sub_categories;


  var selectIngredients = function(dish_id){
    _.forEach($scope.ingredients, function(item){
      var isChecked = item.checked;
      //add ingredients
      if(isChecked){
        console.log(item.checked === true)
      }
    });
  };

  $scope.hasIngredient = function(ingredient){
    var found = [];
  }

  $scope.createDish = function(dish) {
    $scope.ingredient_array = [];
    _.forEach($scope.ingredients,function(item){
      var isChecked = item.checked;
      if(isChecked)
        $scope.ingredient_array.push(item)
    });
    console.log($scope.ingredient_array)
  };
}]);

DishCategoryFactory.js：

angular.module('WaterApp').factory('DishCategoryFactory', function(){
  var categories = ['Breakfast', 'Lunch', 'Dinner', 'Dessert',
    'Baked Goods', 'Snacks', 'Drinks', 'Appetizers'];


  return{
    categories: categories
  };

});

IngredientCategoryFactory.js：

angular.module('WaterApp').factory('IngredientCategoryFactory', function(){
  var categories = ['Food', 'Drink', 'Other']
  var sub_categories = ['Vegetable', 'Fruit', 'Meat', 'Alchoholic','Non-Alchoholic', 'Spice','Starch', 'Flour', 'Oil','Condiment', 'Nuts', 'Other']

  return{
    categories: categories,

    sub_categories: sub_categories
  };

});

IngredientFactory.js：

angular.module('WaterApp').factory('DishFactory',['$http',function($http){

  var dishes = [];

  var fetch = function(){
    $http.get('https://urltomyapi.com/dishes').success(function(response){
        angular.copy(response,dishes);
    }).error(function(data,status,headers,config){
      console.log(data,status,headers,config,'youre doing it wrong');
    });
  };

  return {
    fetch: fetch,
    dishes: dishes
  };
}]);

感谢您的建议。

Answer 1

看起来你已经用你的minsafe在这里翻了个身。

angular.module('WaterApp')
.controller('CreateDishCtrl','$scope','$location','$http',
  'IngredientFactory','IngredientCategoryFactory', 'DishCategoryFactory',
function($scope, $location, $http, 
   IngredientCategoryFactory, IngredientFactory, DishCategoryFactory) {

角度工厂不工作

1 个答案: