使用$ broadcast和$ on的Angular服务问题

Question

我正在使用Angular 1.3.15。使用Angular Fire和FireBase。

我想将我从api控制器中保存的get请求接收的数据（配方）传递给包含所有配方的配方控制器，但我遇到了麻烦。我设置了一个服务模块来处理兄弟控制器之间的通信，但是我收到一个错误，指出addToRecipes（）不是一个函数。

源代码可以在Github上的recipeAdder2分支上查看：https://github.com/malissaromero/eatr/tree/recipeAdder2

api.html（指令）

<h3>Let's Search Recipes</h3>
 <form ng-submit=fetchRecipes();>
   <input type="text" ng-model="recipe.search">
   <button type="submit">Submit</button>
 </form>

<h3>The Results</h3>
 <ul ng-repeat="result in searchResults">
  <li>
   <a href="">{{result.name}}</a>
  </li>
  <button ng-click="addToRecipes()">Add to Recipes</button>
 </ul>

recipe.html（指令）

<div ng-repeat="recipe in recipes">
 <label>{{recipe.name}}</label>
 <label>{{recipe.ingredients}}</label>
 <label>{{recipe.directions}}</label>
</div>

recipe.js（兄弟控制器）

'use strict';

 angular
 .module('eatrApp')
 .controller('recipeCtrl', ['$scope', '$firebaseArray', 'recipeAdder', '$rootScope', function($scope, $firebaseArray, recipeAdder, $rootScope) {

  var firebaseUrl = "https://eatr.firebaseio.com";
  var recipeUrl = new Firebase(firebaseUrl + "/recipes")

  $scope.recipes = $firebaseArray(recipeUrl);

  $rootScope.$on('addToRecipes', function() {
    $scope.setRecipes.$add( recipeAdder.get() )
  });

  $scope.recipes.$loaded(function() {
    console.log("$loaded is on")
    if ($scope.recipes.length === 0) {
      $scope.recipes.$add({
        name: "PB&J Sandwich",
        ingredients: "Peanut Butter, Jelly, Bread",
        directions: "Put PB and Jelly on Bread."
      });
    }
  });

 $scope.reset = function() {
  $scope.recipe.name = "";
  $scope.recipe.ingredients = "";
  $scope.recipe.directions = "";
 };

 $scope.createRecipe = function() {
  $scope.recipes.$add({
    name: $scope.recipe.name,
    ingredients: $scope.recipe.ingredients,
    directions: $scope.recipe.directions
  });
  $scope.reset()
 };

}])

api.js（兄弟控制器）

angular
.module('eatrApp')
.controller('apiCtrl', ['$scope', '$http', 'recipeAdder', '$rootScope', function($scope, $http, recipeAdder, $rootScope) {

  $scope.searchResults = [];

  $scope.recipe = {
        search: ''
      }

  $scope.fetchRecipes = function() {
    $http.get("https://api.yummly.com/v1/api/recipes?", {
      headers : {
        "X-Yummly-App-ID" : "XXX",
        "X-Yummly-App-Key" : "XXX"},
      params : {
        "q" : $scope.recipe.search,
        "requirePictures" : "true"}
    })
    .then(function(response) {
      $scope.details = response.data;

      $scope.searchResults = [];
      for (var i = 0; i < 10; i++) {
        var recipeName = response.data.matches[i].recipeName
        $scope.searchResults.push({name: recipeName})
      }
    });
  };

  $scope.addToRecipes = function(result) {
    console.log("add to recipes click event working")
    $scope.searchResults = [];
    recipeAdder.set(result, "setRecipes")
  };
}])

recipeAdder.js（服务）

angular
.module('eatrApp')
.service('recipeAdder', ["$rootScope", function($rootScope) {
  this.selectedRecipe = "";

  return {
    get: function() {
      return this.selectedRecipe;
    },
    set: function(value, list) {
      this.selectedRecipe = value;
      switch(list) {
        case "addToRecipes":
        $rootScope.$broadcast('addToRecipes', this.selectedRecipe)
        break;
      }
    }
  }
}]);