Question

当我尝试将ng-click中的param传递给我的函数时，我遇到了一个问题。我无法得到我的参数。我是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并将我的代码放在那里。即使我为外部资源添加角度并为框架添加角度，我仍然无法让它工作。但是，如果有人认为它有用，我仍然会在这里放小提琴。我稍微修改了我的原始代码。

的jsfiddle 1

Answer 1

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

查看controller as

的所有语法详细信息here

<强>更新

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

Here's the working JSFiddle

你唯一的错误就是：

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

2）您遇到语法错误 - 您有};)而不是});

除此之外，你的逻辑和AngularJS结构都很好，所以没什么大的：）

如果出现问题，请告诉我！

Answer 2

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

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>

此外，它可能也不会导致您的问题，但正如其他人所建议的那样，您可能希望传递整个＆＃34;配方＆＃34;。

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

原因在于，您的HTML不应该真正了解控制器如何删除配方。例如，你拥有它的方式，如果你假设改变你的应用程序，使得配方上有一个delete（）方法，你将不得不改变你的视图和你的控制器。如果您传递整个食谱，您的视图将不需要任何更改。

Answer 3

请尝试使用ng-click =＆＃34; $ parent.deleteRecipe（recipe.id）＆＃34;。

Answer 4

尝试替换

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)"

Angular：ng-click参数未定义，在ng-repeat内

4 个答案: