AngularJS - 如何在控制器之間共享功能

Question

試圖找到AngularJS的最佳實踐。這裏的交易：

有兩種不同的頁面與形式，其中每個人都有自己的表單字段。但是這兩種表單都有一個共同的功能：它們有一個自動填充字段，用戶可以使用該字段來選擇系統中存在的多個電子郵件地址。

選定的電子郵件地址被存儲到模型/範圍，以便它們可以顯示在HTML頁面上。這裏有一個例子：

<div ng-controller="MyCtrl"> 
    <form ng-submit="selectCurrentEmail()" novalidate> 
     <input type="text" 
       class="form-control" 
       ng-model="responsiblePerson" /> 
     <input type="submit" value="Add" /> 

     <div ng-repeat="email in formData.selectedEmails"> 
      <div> 
       {{email}} <a href="" ng-click="removeEmail(email)">x</a> 
      </div> 
     </div> 
    </form> 
</div> 

和angularjs部分：

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 
    $scope.formData = {selectedEmails: []}; 

    $scope.selectEmail = function(email) { 
     if (email != null && $.inArray(email, $scope.formData.selectedEmails) == -1) { 
      $scope.formData.selectedEmails.push(email); 
      $scope.responsiblePerson = null; 
     } 
    }; 

    $scope.removeEmail = function(email) { 
     var index = $.inArray(email, $scope.formData.selectedEmails); 

     if (index != -1) { 
      $scope.formData.selectedEmails.splice(index, 1); 
     } 
    }; 

    $scope.selectCurrentEmail = function() { 
     $scope.selectEmail($scope.responsiblePerson); 
    }; 
} 

http://jsfiddle.net/PqpYj/

（不包含自動完成，因爲這不是主要的問題在這裏..）

這一切正常，但我不想在兩個控制器中重複相同的邏輯。我想要的是一個服務或基本控制器，可以負責設置和刪除選定的電子郵件地址。當用戶完成時，範圍將只包含選定的電子郵件地址。

那麼，你認爲有一個很好的方法來推廣範圍內的三個功能？任何想法使這更好？

Answer 1

因爲這是一個UI元素，我會把邏輯放到一個Directive中。

myApp.directive('mailSelector', function() { 
    return { 
     scope: { 
      emails: '=' 
     }, 
     template: '<form ng-submit="selectCurrentEmail()" novalidate>' + 
     '<input type="text"'+ 
     '  class="form-control"'+ 
     '  ng-model="responsiblePerson" />'+ 
     '<input type="submit" value="Add" ng-click="selectCurrentEmail()" />'+ 

     '<div ng-repeat="email in emails">'+ 
     ' <div>' + 
     '  {{email}} <a href="" ng-click="removeEmail(email)">x</a>' + 
     ' </div>' + 
     '</div>' + 
    '</form>',   
     link: function($scope, $element, $attrs) { 
      $scope.selectCurrentEmail = function() { 
       $scope.selectEmail($scope.responsiblePerson); 
      } 

      $scope.selectEmail = function(email) { 
       if (email != null && $.inArray(email, $scope.emails) == -1) { 
        $scope.emails.push(email); 
        $scope.responsiblePerson = null; 
       } 
      } 

      $scope.removeEmail = function(email) { 
       var index = $.inArray(email, $scope.emails); 
       if (index != -1) { 
        $scope.emails.splice(index, 1); 
       } 
      }; 
     } 
    }; 
}); 

控制器可以通過與指令定義emails參數檢索指令的電子郵件列表。

我創建了一個JSFiddle here。

要共享以前輸入的電子郵件地址以便自動完成，我會修改指令以使用服務，該服務包含以前輸入的電子郵件地址的列表。