Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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.

share|improve this question
    
can you add a fiddle for working jquery version. – Quad May 21 '14 at 8:06
1  
You are using zipLookup instead of $.zipLookup. Anyway, it's better to wrap jquery plugins in directives or services. – link May 21 '14 at 8:08

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

share|improve this answer

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.