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

试图找到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>

（不包含自动完成，因为它不是这里的主要问题….）

这一切都很好，但我不想在两个控制器中重复相同的逻辑。我想要的是一个服务或基本控制器，可以负责设置和删除选定的电子邮件地址。当用户完成时，作用域将只有选定的电子邮件地址

---

那么，你认为有一个很好的方法在这个范围内推广这三个函数吗？有没有更好的想法？

因为这是一个UI元素，所以我会将逻辑放入指令中

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);
                }
            };
        }
    };
});

myApp.directive（'mailSelector'，function（）{
返回{
范围：{
电子邮件：'='
},
模板：“”+
''+
''+
''+
'    ' +
“{{email}}”+
'    ' +
'' +
'',        
链接：函数（$scope、$element、$attrs）{
$scope.selectCurrentEmail=function（）{
$scope.selectEmail（$scope.responsiblePerson）；
}
$scope.selectEmail=功能（电子邮件）{
if（email！=null&$.inArray（email，$scope.emails）=-1）{
$scope.email.push（电子邮件）；
$scope.responsiblePerson=null；
}
}
$scope.removeMail=函数（电子邮件）{
var索引=$.inArray（email，$scope.emails）；
如果（索引！=-1）{
$scope.emails.splice（索引1）；
}
};
}
};
});

控制器可以通过指令定义的

emails

参数从指令中检索电子邮件列表

我已经创建了一个JSFIDLE

---

要共享以前输入的自动完成电子邮件地址，我将修改指令以使用服务，该服务包含以前输入的电子邮件地址列表。

如您所建议，为您的自动完成字段编写指令模块，该模块将保存到角形服务。可能重复使用服务是更好的选择谢谢，这正是我要找的！仍然在学习AngularJS的所有好东西。我想我没有意识到你可以像那样直接访问链接函数中的作用域：）

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);
                }
            };
        }
    };
});