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元素，我会将逻辑放入指令中。

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参数从Directive中检索电子邮件列表。

我创建了一个JSFiddle here。

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

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

1 个答案: