跨視圖和控制器共享按鈕和邏輯

我正在處理與嚮導行爲類似的單頁應用程序。用戶登陸第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

跨視圖和控制器共享按鈕和邏輯

回答

相關問題