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

我正在处理与向导行为类似的单页应用程序。用户登陆第1页，需要保存并继续进入第2页。在所有视图之间共享这些按钮的最佳方式是什么？我的表单名称是不同的，所以我现在要复制这些按钮，这样我可以用这样的逻辑：跨视图和控制器共享按钮和逻辑

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

但随后第2页：

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

为了进一步使问题复杂化，节省了第1页职位数据发送到与第2页不同的地址。我有一个导航控制器，它是父母，需要处理。

因此，要总结，我需要我的按钮（Back，Save和Save and Continue）做以下所有的，而不必在所有视图复制按钮：

检查当前的形式是有效的
如果它是有效的，对于形式的数据需要发布到正确的端点为形式
导航需要通知，以便它可以更新和/或采取行动

来源

2013-12-19 Pete

工作示例您可能要寻找什么，在commangular此功能http://commangular.org/ – Rob

作为罗布帆，我用commangular的注册过程，需要登记，核查移动等。 – HCdev

本质上，您需要重新使用模板（/控制器），并以某种方式将选项传递给它。你或许可以用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

来源

2013-12-19 22:55:11

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

回答

相关问题