Question

我是Angularjs的初学者，我正在尝试做的是根据条件从指令中调用两种不同的方法。

我的工作流程是

我在指令中有一个表单
当我尝试通过表单添加新记录时，功能在指令应该调用save()方法
当我尝试更新新记录时，指令中的函数应该调用update方法

这是我目前的代码

#new html form (calling the form directive)
<recipe-form recipeForm="recipeFormData" > </recipe-form>

#edit html form (calling the form directive)
<recipe-form recipeForm="recipeFormData" > </recipe-form>

所以在我的指令中我有以下方法

#form directive
<form id="signup-form_id" ng-submit="$parent.Update()">

所以我想做的是，当指令从#new调用时，我希望方法

<form id="signup-form_id" ng-submit="$parent.Create()">

所以我想做的是，当指令从#edit调用时，我希望方法

<form id="signup-form_id" ng-submit="$parent.Update()">

我试图将该方法作为参数传递，但由于某种原因它无效：

   #update form 
   <recipe-form recipeForm="recipeFormData" update="Update()"> </recipe-form>

Answer 1

您没有告诉您如何区分这两个操作，但您始终可以在布尔变量中指定方法（您指定为指令属性，或控制器的范围变量等）。 ..让我们称之为updateMethod）并像这样使用它：

<form id="signup-form_id" ng-submit="updateMethod ? $parent.Update() : $parent.Create()">

甚至两种不同的形式（如果表格本身不同，特别有用）：

<form id="signup-form_id" ng-submit="$parent.Update()" ng-if="updateMethod">

和

<form id="signup-form_id" ng-submit="$parent.Create()" ng-if="!updateMethod">

第三个选项是使用单个提交函数，但在其中放入if / else分支。

Answer 2

您实际上是通过编写()括号而不是引用来传递更新方法结果。

我建议您在指令属性中传递update / create函数。这种方式更具参数性，并未提及$parent并未完全隔离。

HTML：

<recipe-form custom-data="recipeFormData" method="create"></recipe-form>
<recipe-form custom-data="recipeFormData" method="update"></recipe-form>

控制器：

$scope.recipeFormData = { foo: 'bar' };

$scope.create = function (data) {
  // create something
}

$scope.update = function (data) {
  // update something
}

指令：

app.directive('recipeForm', function () {
  return {
    templateUrl: 'mySuperDirective.html',

    // creates an isolated scope
    scope: {
      customData: '=',
      method: '='
    }
  };
});

mySuperDirective.html：

<form ng-submit="method()">
  <input type="text" ng-model="customData.foo">
  <button type="submit">OK</button>
</form>

在Angularjs指令内有条件地调用方法

2 个答案: