Question

方案

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

模态A

Modal A

模式B

Modal B

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

我正在为旋转木马使用光滑滑块，并添加一个新的幻灯片需要一个字符串，所以我想在添加它之前试图格式化我的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（）只是一个输出“我已点击过！”的函数。消息到控制台，但点击时没有被调用。

问题

如何编译此字符串以便附加该函数？

提前致谢

注意：这不是指令，角度引导程序的模态，如下所示：

$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，但是参考＆＃34; AngularJS + JQuery : How to get dynamic content working in angularjs＆＃34;，您可能需要执行以下操作：

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

我希望这些信息可以帮助你。

在控制器中附加ng-click

1 个答案: