Usage in Angular JS app

[vavrecka]

Hey guys, I have troubles setting up the form in my Angular JS app. I have posted question on stackoverflow as well: http://stackoverflow.com/questions/22444480/skeuocard-in-angular-app I basically copied the working example into my Angular JS app and I am constantly getting this error:

TypeError: Cannot read property 'length' of undefined
    at Skeuocard._importImplicitOptions (http://127.0.0.1:9000/lib/skeuocard/javascripts/skeuocard.min.js:1:4226)
    at new Skeuocard (http://127.0.0.1:9000/lib/skeuocard/javascripts/skeuocard.min.js:1:1162)
    at new controller (http://127.0.0.1:9000/js/modules/OtherDirectives.js:98:32)
    at invoke (http://127.0.0.1:9000/lib/angular/angular.js:3760:17)
    at Object.instantiate (http://127.0.0.1:9000/lib/angular/angular.js:3771:23)
    at http://127.0.0.1:9000/lib/angular/angular.js:6881:28
    at http://127.0.0.1:9000/lib/angular/angular.js:6268:34
    at forEach (http://127.0.0.1:9000/lib/angular/angular.js:329:20)
    at nodeLinkFn (http://127.0.0.1:9000/lib/angular/angular.js:6255:11)
    at http://127.0.0.1:9000/lib/angular/angular.js:6529:13 

No idea why, I have tried passing default values, names of the inputs, dumping jQuery init, no luck. Do you support angular usage?

Thanks a bunch!

[vanerleo]

I had to do a whole song and dance around it. so far this is how i got it to work. not elegant but works in the view :

    $(document).ready(function () {

        card = new Skeuocard($("#skeuocard"));

        $('#skeuocardButton').on('click', function () {
            var scope = angular.element($("select")).scope();

            if (!card.isValid()) {
                scope.errorMessage = "Invalid Payment Information";
                console.log('invalid');
                return false; // not a valid card; don't allow submission
            } else {

                var ccType = $('#cc_type option:selected').text();

                var ccName = $('#cc_name').val();
                var ccNumber = $('#cc_number').val();
                var ccExpMonth = $('#cc_exp_month').val();
                var ccExpYear = $('#cc_exp_year').val();
                var ccCvc = $('#cc_cvc').val();

                scope.$apply(function () {
                    scope.PaymentOption.CardType = ccType;

                    scope.PaymentOption.NameOnCard = ccName;
                    scope.PaymentOption.CardNumber = ccNumber;
                    scope.PaymentOption.CardExpiryMonth = ccExpMonth;
                    scope.PaymentOption.CardExpiryYear = ccExpYear;
                    scope.PaymentOption.Cvc = ccCvc;

                    scope.wip();
                    scope.SaveCCDetails();
                });
            }
        });
    });

and in the controller defined the following structure :

PaymentOption: {
            NameOnCard: '',
            CardType: '',
            CardNumber: '',
            CardExpiry: '',
            CardExpiryMonth: '',
            CardExpiryYear: '',
            Cvc: ''
        },

[vavrecka]

Thanks for your help, I really appreciate it. Weirdly enough, I got it working another way. Unfortunately the HTML2JADE convertor screwed the code up, and the whole thing was in the first paragraph, so the jQuery couldn't handle it for some reason. So I removed the

tag and it all works now, even without your dance around :-)

[paveltyk]

@vavrecka how did you get the angular data-binding to work?