Calling a Javascript function from AngularJS Controller

Question

I am still learning to convert the jquery calls to Angular js. I have earlier built a webpage for zip look up using ziplookup

For this I have to add:

<script src="http://ziplookup.googlecode.com/git/public/ziplookup/zipLookup.min.js" type="text/javascript">
</script>

and

$(document).ready(function() {                                  // When the document loads,

            $.zipLookupSettings.libDirPath = 'ziplookup/'               // (Optionally) set the library folder path manually

            $('[name=zipcode]').blur(function(){                        // Set on blur
                $.zipLookup(                                            // Do a Zip code Lookup
                    $(this).val(),                                      // Zip code Field Value
                    function(cityName, stateName, stateShortName){      // If Successful,
                        $('input[name=city]').val(cityName);            // Set City name
                        $('input[name=state_short]').val(stateName);    // Set State abbreviation
                        $('input[name=state]').val(stateShortName);     // Set State name
                        $('.message').html("Found Zipcode");            // Add a message
                    },
                    function(errMsg){                                   // If Zip couldn't be found,
                        $('.message').html("Error: " + errMsg);         // Add an error message
                    });
            });
        });

Now I wish to port this to angular js. Instead to calling the zipLookup function on blur event , I am calling it from button press. and setting the same parameters but it giving: ReferenceError: zipLookupSettings is not defined or ReferenceError: zipLookup is not defined

$scope.zipeval = function(){
     //zipLookupSettings.libDirPath = 'ziplookup/';
    zipLookup(                                            // Do a Zip code Lookup
        11722,                                      // Zip code Field Value
        function(cityName, stateName, stateShortName){      // If Successful,
            $log.log(cityName + stateName + stateShortName);
            //$('input[name=city]').val(cityName);            // Set City name
            //$('input[name=state_short]').val(stateName);    // Set State abbreviation
            //$('input[name=state]').val(stateShortName);     // Set State name
            //$('.message').html("Found Zipcode");            // Add a message
        },
        function(errMsg){                                   // If Zip couldn't be found,
            $log.log("error");       // Add an error message
        });
};

Please guide. Do I need to create a directive.

Answer 1

Here you have called it as a local function.

you should call it as $.zipLookup.

In your HTML you can add one directive.

 <input name="zipcode" custDirective></input>

In your directive's link function, you can bind to events like 'blur' or 'click'. There you can call $.zipLookup()