Question

我正在开发一个与向导类似的单页应用。用户登陆第1页，需要保存并继续进入第2页。在所有视图之间共享这些按钮的最佳方式是什么？我的表单名称不同，所以我目前必须复制这些按钮，所以我可以使用如下逻辑：

<div class="mySaveButton" ng-disabled="page1Form.$invalid"></div>

然后在第2页：

<div class="mySaveButton" ng-disabled="page2Form.$invalid"></div>

为了使问题更加复杂，在page1上保存会将数据发布到与page2不同的地址。我有一个导航控制器，它是父母，也需要处理。

总而言之，我需要我的按钮（Back，Save和Save and Continue）来执行以下所有操作，而无需在所有视图中复制按钮：

检查当前表格是否有效
如果它有效，则该表单的数据需要发布到该表单的正确端点
需要通知导航，以便更新和/或采取措施

Answer 1

基本上你需要重新使用模板（/ controller），并以某种方式将选项传递给它。您可以使用ngInclude和嵌套控制器执行某些操作，但稍后对更复杂的结构更友好的方法是创建自定义指令。这取决于你的确切用例，以及你需要传递给它的内容，但是一个简单的版本会是这样的：

app.directive('formButtons', function() {
  return {
    restrict: 'E',
    scope: {
      'localBack':'&back',
      'localSave':'&save',
      'localSaveAndContinue':'&saveAndContinue'
    },
    templateUrl: 'buttons.html'
  };
});

使用

模板

<div>
  <button ng-click="localBack()">Back</button>
  <button ng-click="localSave()">Save</button>
  <button ng-click="localSaveAndContinue()">Save &amp; Continue</button>
</div>

&的范围选项分别定义了指令范围的函数，该函数评估父范围中该名称的<form-buttons>元素的属性内容。然后，您可以按如下方式使用该指令

<form-buttons back="back(2)" save="save(2)" save-and-continue="saveAndContinue(2)"></form-buttons>

将被指令的模板替换，并且在父作用域上定义的函数save，back和saveAndContinue将在单击时被调用模板中的按钮，传递适当的步骤编号，可用于自定义行为。

您可以在http://plnkr.co/edit/fqXowQNYwjQWIbl6A5Vy?p=preview

看到一个有效的例子

跨视图和控制器共享按钮和逻辑

1 个答案: