current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

Trying to find the best practices with AngularJS. Here's the deal:

There are two different pages with forms where each of them have their own form fields. But there is a one common functionality on both of the forms: they have an autocomplete field which the user can use to select multiple email addresses that exist in the system.

The selected email addresses are stored to the model/scope so that they can be shown on the HTML page. Here's an example: 

<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>

and the angularjs part:

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/

(doesn't contain the autocomplete since it's not the main issue here..)

This all works fine, but I don't want to repeat the same logic in both of the controllers. What I would like to have is a service or a base controller that can take care of setting and removing the selected email addresses. And when the user is done, the scope would have just the selected email addresses.

So, do you think there's a good way to generalize the three functions in the scope? Any ideas making this better?

share|improve this question
1  
As you suggested, write a directive module for your autocomplete field, which saves to an angular service –  Sprottenwels Oct 28 '13 at 7:21
    
possible duplicate of Can one controller call another in AngularJS? –  Stewie Oct 28 '13 at 7:26
    
Using services is the better option here –  BKM Oct 28 '13 at 8:20

1 Answer 1

up vote 1 down vote accepted

Because this is a UI element, I would put the logic into a 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);
                }
            };
        }
    };
});

Controllers can retrieve a list of emails from Directive via emails parameter defined with the directive.

I have created a JSFiddle here.

To share previously input email addresses for auto-completion, I would modify the directive to use a Service, which holds the list of previously input email addresses.

share|improve this answer
    
Thanks, this is exactly what I was looking for! Still learning all the good stuff in AngularJS. I guess I didn't realize you could just access the scope right in the link function like that.. :) –  Janne Oct 28 '13 at 11:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.