0

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

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

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

那么，您认为有没有一种很好的方法来概括作用域中的三个函数？有什么想法可以让这变得更好吗？

4

1 回答 1

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控制器可以通过指令定义的参数从指令中检索电子邮件列表。

我在这里创建了一个 JSFiddle 。

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

于 2013-10-28T09:49:59.937 回答