Attaching ng-click in a controller

Question

Scenario

I have a carousel in modal A which is made up of a bunch of slides. Each slide is a credit card. One of the slides however allows the user to launch modal B; this modal (Modal B) is used to record new credit card details. An object from modal B is then returned to A, after it's closed, which should then be added to the carousel in modal A.

Modal A

Modal A

Modal B

Modal B

Naturally I want this credit card (slide) to have the same functionality as the others, for example, if I click on it it should become the default credit card, highlighted by a grey background and a green tick on the top right.

I'm using slick-slider for the carousel and to add a new slide it needs a string so I'm trying to angularize my HTML string before adding it:

    // Adds the new credit card 
    $scope.addNewCreditCard = function (newCreditCard) {

        var slider = $('.slick-slider');
        if (slider) {
            var tempData = $scope.creditCardDetails;
            $scope.creditCardDetails = null;

            var htmlString = '<div class="creditcard" ng-click="fooBar()" '+
                                '<p>Some text</p>'+
                             '</div>';
            // Angularize the string
            var ngString = $compile(htmlString)($scope);
            slider.slickAdd( ngString, 0, true);

            // Update the object
            $scope.creditCardDetails = tempData;
        } else {
            $log.error('Not found');
        }
    };

fooBar() is just a function that outputs an 'I've been clicked!' message to the console but it isn't being called when clicked.

Question

How do I go about compiling this string so it gets that function attached?

Thanks in advance

Note: This is not a directive, the modal, courtesy of angular bootstrap, is called like so:

$scope.showAddNewCreditCardModal = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modules/common/partials/modals/addcreditcard/modal.addcreditcard.html',
            backdrop: true,
            windowClass: 'modal-add-credit-card',
            controller: 'AddCreditCardCtrl',
            size: 'lg',
            scope: $scope
        });
        modalInstance.result.then(
                function (success) {
                    // Below is a dummy that fills in the blanks for the card
                    var newCreditCard = {
                        'ElectronicPaymentAccountID': '123456789',
                        'ElectronicPaymentAccountType': 'ACP',
                        'CreditCardNumber': success.cardnumber,
                        'ExpirationDate': success.expmm + '/' + success.expyy,
                        'PreferredAccount': 'false',
                        'AccountName': ':o',
                        'PaymentTypeCode': ''
                    };
                    $scope.addNewCreditCard(newCreditCard);
                },
                function (error) {
                    $log.debug('Error: ' + JSON.stringify(error));
                }
        );
    };

@OneWay yes it is - the same scope as the one I'm using in $compile so it should be accessible — Katana24, Dec 16 '14 at 21:34

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

Before to answer your question, I want to get your attention on your condition:

var slider = $('.slick-slider');
if (slider) { ... }

I don't know if this is angular syntax but I think you should use this kind of condition:

var slider = $('.slick-slider');
if (typeof slider[0] != "undefined") { ... }
/* OR if (typeof slider[0] === "object") { ... } */

To answer, I don't really use AngularJS, but referring to "AngularJS + JQuery : How to get dynamic content working in angularjs", you maybe have to do something like:

var ngString.html($compile(htmlString)($scope));

I hope this informations help you.

edited May 23 '17 at 12:28

Community

1
1

answered Dec 18 '14 at 14:48

Rodriguez Loïc

303
4
7

Thanks for the reply and sorry for taking so long to long at this. The code you have above for var ngString.html is syntactically incorrect and so, doesn't work. – Katana24 Dec 22 '14 at 16:45

Attaching ng-click in a controller

1 Answers1