Angular: ng-click参数未定义，在ng-repeat里面

Question

当我尝试将参数从 ng-click 传递到我的函数时遇到了问题。我无法得到我的参数。我是Angular.js的新手。所以我想我可能对 ng-repeat 里面的 ng-click 缺乏基本的了解。如果有人可以提供帮助，我将不胜感激。谢谢。

查看：

<table>
  <tr ng-repeat="recipe in urCtrl.userRecipes | filter: {category: 'Grill'}">
    <td>{{ recipe.id }}</td>
    <td>{{ recipe.name }}</td>
    <td>{{ recipe.category}}</td>
    <td>{{ recipe.ingredients }}</td>
    <td>{{ recipe.instructions }}</td>
    <button ng-click="deleteRecipe(recipe.id)">Delete</button>
   </tr>
</table>

控制器：

(function userRecipeControllerIIFE() {

var UserRecipeController = function($scope, likeRecipesFactory, recipesFactory, appSettings) {

    function init() {

        ....

      $scope.deleteRecipe = function(data){
        console.log("this is recipe: ", data);
      };
    };

    init();
};

UserRecipeController.$inject = ['$scope', 'likeRecipesFactory', 'recipesFactory', 'appSettings'];

angular.module('recipesApp').controller('userRecipeController', UserRecipeController);
})();

路线：

$routeProvider.when('/user', {
            controller: 'userRecipeController as urCtrl',
            templateUrl: 'app/views/urView.html'
        })

控制台： here

更新： 感谢大家的帮助。我对开发人员的世界如此陌生，所以我花了一些时间来学习 JSfiddle 并将我的代码放在那里。即使我为外部资源添加 angular 并为框架添加 angular ，我仍然无法让它工作。但是我还是把fiddle放在这里，如果有人觉得有帮助的话。我稍微修改了我的原始代码。

JSfiddle1

Answer 1

尝试替换

function init() {

        ....

      $scope.deleteRecipe = function(data){
        console.log("this is recipe: ", data);
      };
    };

    init();

和

var 
function init() {

}
init();
$scope.deleteRecipe = function(data){
    console.log("this is recipe: ", data);
};

或

$scope.init = function init(){
   return {
       deleteRecipe : function(id){ return data;}

   };
}

并将其用作

 ng-click="init.deleteRecipe(id)"

Answer 2

看起来您需要使用 urCtrl.deleteRecipe(recipe.id)，因为您正在使用 controller as，因此每次您在控制器中引用任何内容时，您都需要使用您决定使用的变量名称。

查看 here 了解 controller as

的所有语法细节

更新：

好的，感谢 JSFiddle！正是我们所需要的！

Here's the working JSFiddle

你的 fiddle 唯一的问题是：

1) 在您的控制器中定义配方时，您指的是 this。仅在使用 controller as 语法时引用 this。查看上面的更多详细信息。

2) 你有一个语法错误 - 你有 };) 而不是 });

除此之外，你的逻辑和 AngularJS 结构都很好，没什么大不了的:)

如果还有问题请告诉我！

Answer 3

使用控制器时，您可以将该方法放在控制器上：

var UserRecipeController = function($scope, likeRecipesFactory, recipesFactory, appSettings) {

    this.deleteRecipe = function(data){
        console.log("this is recipe: ", data);
    };

    function init() {
        ....
    };

    init();
};

然后在你的 html

<button ng-click="urCtrl.deleteRecipe(recipe.id)">Delete</button>

我认为这不会导致您的问题，但您可能希望将该按钮包装在 TD 标记中，因为您可能会遇到一些意外的布局问题。

<td><button ng-click="urCtrl.deleteRecipe(recipe.id)">Delete</button></td>

此外，它可能也不会导致您的问题，但正如其他人所建议的那样，您可能想要通过整个 "recipe"。

<td><button ng-click="urCtrl.deleteRecipe(recipe)">Delete</button></td>

原因是，您的 HTML 真的不需要知道您的控制器如何删除食谱。例如，你拥有它的方式，如果你假设改变你的应用程序使得配方有一个 delete() 方法，你将不得不改变你的视图和你的控制器。如果你通过了整个食谱，你的观点将不需要任何改变。

Answer 4

请尝试使用 ng-click="$parent.deleteRecipe(recipe.id)".

Angular: ng-click参数未定义，在ng-repeat里面

Angular: ng-click parameter is undefined, which is inside ng-repeat

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click