1

设想

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

模态A

模态A

模态 B

模态 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));
                }
        );
    };
4

1 回答 1

0

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

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

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

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

要回答，我并没有真正使用 AngularJS，但参考“ AngularJS + JQuery：如何在 angularjs 中获取动态内容”，您可能需要执行以下操作：

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

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

于 2014-12-18T14:48:24.660 回答