0
Я работаю над проектом AngularJs, где пользователь может выбрать несколько ингредиентов. Ингредиенты подпадают под разные категории, которые я жестко закодировал в модели и использую в качестве раскрывающихся списков для фильтрации результатов в представлении. Чтобы предоставить все списки категорий контроллеру, который контролирует это представление, я создал несколько категорий.Угловая фабрика не работает
Они заключаются в следующем: 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
};
}]);
Спасибо за ваши советы.
Именно так, спасибо! Они не слишком много говорят о таких вещах в документах. –