如何通過指令和控制器中的代碼交叉構造Angular Webapp？
[英]How to structure Angular webapp with code crossing over in directive and controller?
問題描述
我在與“突出顯示的圖像”有關的指令中有代碼。 目的是能夠在圖像上創建高光並為其添加注釋。 因此，當您單擊圖像時，它會創建一個注釋。
我在控制器中有一個工具提示工具欄的代碼，可用於將注釋附加到注釋。 當前，當按下此工具欄上的“注釋”按鈕時，信息將存儲到數據庫中。 如果單擊工具欄上的“取消”，則應刪除突出顯示。
我的困境是我不確定如何組織事物以符合MVC設計模式。 具體來說，單擊取消在工具欄中發生，但必須影響突出顯示（由指令管理）。 單擊評論必須調用服務以修改數據庫。
我曾考慮過將工具欄代碼移到指令中，但另有決定，因為指令不應該處理后端。 理想情況下，工具欄應位於其自己的指令中。 我想知道您認為這樣做的“正確”方法是什么。
2 個解決方案
解決方案1
5 已采納 2014-05-23 18:42:55
根據您描述的功能，
創建服務：
highlightImageService（這將使用$ http服務將數據持久保存到數據庫中）
- addHighlightToImage（圖像，高光）
- attachComment（突出顯示，評論）
- deleteHighlight（高亮）
創建一個控制器：
highlightImageController
- createHighlight（）
- attachComment（）
- deleteHighlight（）
在指令中，指定控制器並注入服務：
.directive('imageHighlighter', function(highlightImageService) {
restrict: ...
scope: ...
controller: highlightImageController,
link: function(scope, element, attr, controller) ...
})
將所有內容捆綁在一個模塊中：
var module = angular.module('imageHighlighter', [...]);
module.controller(highlightImageController);
module.directive(imageHighlighter)
module.factory(highlightImageService);
由於所有內容都是自包含在模塊中（指令，控制器，服務），因此使用模塊所要做的全部工作就是將其添加為模塊依賴項，並在頁面中添加指令：
腳本：
var app = angular.module('app', ['imageHighlighter']);
HTML：
<body ng-app="app">
<div image-highlighter></div>
</body>
解決方案2
0 2014-05-23 19:15:12
還有另一種結構方式。
- 創建指令工具欄
- 創建指令熒光筆
- 創建服務DataService
- 在控制器范圍內創建回調函數
- 將這些函數作為屬性傳遞給指令
- 處理完所有與UI相關的問題后，您的指令將執行相應的回調
- 控制器范圍內的回調將調用DataService采取適當的操作，例如：刪除注釋，保存注釋
- 這樣，您可以避免直接從指令調用服務，而只處理UI問題。
- 將函數傳遞給指令的方法如下： 將函數作為屬性傳遞給指令
如何在角度指令中測試控制器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.