AngularJS - DRY (input fields, function, directive)

Question

I am fairly new to AngularJS and I got in situation where my code starts to repeat. I am thinking of creating a new directive but for now I am a bit confused with scope/isolated scope/directive's controller/etc. issues.

Here is what I am trying to achieve. Please have in mind that my code is already working but without directive, so I will put this in a very theoretic way.

I have two inputs, one for city and one for zip code.

<input get-zip name="city" ng-model="city" ng-blur="getZip();" />
<input name="zip" ng-model="zip" />

When user enters city and leaves input field, a function getZip() should be called (passing param: value of city input) which then searches corresponded zip code and enters it into zip field.

In some situations we could have two city-zip inputs on the same form. In this case we need to pass zip input name or model into calling function, so we can then append zip value to the right input.

What would be the right way to solve this issue? Thank you in advance.

trees_are_great trees_are_great · Accepted Answer · 2015-06-01T08:49:10

Put the zip and city inputs as directives inside a directive. You can then have many of these pairs each with their own scope.

The directive containing these elements:

(function () {

    angular.module('myApp.directives').directive('cityZipInputPair', function () {
        return {
            restrict: 'E',
            templateUrl: '/Templates/Directives/CityZipInputPair.html',
            scope: {
                city: '=',
                zip: '='
            },
            controller: ['$scope', function ($scope) {
                $scope.getZip = function(){
                    // handle functionality here with $scope.zip and $scope.city
                }

            }]
        }
    });
}).call(this);

CityZipInputPair.html should then look like:

<input get-zip name="city" ng-model="city" ng-blur="getZip();" />
<input name="zip" ng-model="zip" />

The directive can then be put onto the page multiple times as follows:

<city-zip-input-pair city="city1" zip="zip1"></city-zip-input-pair>
<city-zip-input-pair city="city2" zip="zip2"></city-zip-input-pair>

AngularJS - DRY (input fields, function, directive)

1 Answers