在控制器中附加 ng-click

Question

场景

我在模态 A 中有一个轮播，它由一堆幻灯片组成。每张幻灯片都是一张信用卡。然而，其中一张幻灯片允许用户启动模态 B；此模式（模式 B）用于记录新的信用卡详细信息。模态 B 中的对象在关闭后返回到 A，然后应将其添加到模态 A 中的轮播中。

---

模态 A

---

模态 B

---

当然，我希望这张信用卡（幻灯片）具有与其他信用卡相同的功能，例如，如果我点击它，它应该成为默认信用卡，以灰色背景和右上角的绿色勾号突出显示.

我将 slick-slider 用于轮播并添加新幻灯片，它需要一个字符串，因此我尝试在添加之前对我的 HTML 字符串进行角度化：

    // 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() 只是一个输出“我已被点击！”的函数向控制台发送消息，但单击时不会调用它。

---

问题

我该如何编译这个字符串以便附加该函数？

提前致谢

注意：这不是指令，模态，由 angular bootstrap 提供，调用方式如下：

$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));
                }
        );
    };

Answer 1

在回答您的问题之前，我想请您注意一下您的情况：

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

我不知道这是否是角语法，但我认为你应该使用这种条件：

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

要回答，我并没有真正使用 AngularJS，但提到“AngularJS + JQuery : How to get dynamic content working in angularjs”，您可能需要执行以下操作：

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

希望这些信息对您有所帮助。