角度隔离范围不绑定

Question

我有一个如下创建的指令和下面的控制器，但我似乎可以让父范围工作

"use strict";
app.directive("ccDetails", function () {
    return {
        restrict: "E",
        replace: true,
        templateUrl: "/give/creditcarddetails",
        scope: {
            showCreditCardDetails: "=showCreditCardDetails",
            creditCardDetails: "=",
            nameOnCard: "="
        },
        controller: function ($scope) {
            console.log("Name on card is " + $scope.nameOnCard);
            console.log("showCreditCardDetails is " + $scope.showCreditCardDetails);
            console.log("creditCardDetails is " + $scope.creditCardDetails);
        }
    }
});

我正在动态编译并将其附加到我的 DOM 的一部分。

"use strict";
app.controller("giveController", [
    "$scope", "$compile", function ($scope, $compile) {
        $scope.donationTypes = [
            { id: 1, name: "Credit Card" }
        ];

        $scope.donationTypeChange = function () {

            
            $scope.showCreditCardDetails = false;
            $scope.nameOnCard = "James";

            // credit card donationType
            if ($scope.selectedDonationType != null && $scope.selectedDonationType.id === 1) {
                var creditCardDetailsHtml = $compile("<cc-Details showCreditCardDetails=\"showCreditCardDetails\"></cc-Details>")($scope);
             
                $scope.showCreditCardDetails = true;
                console.log(creditCardDetailsHtml);

               $(".give-step-1").after(creditCardDetailsHtml);
               
            }
        };
    }
]);

范围不具有约束力且无法正常工作。有什么帮助吗？

Answer 1

HTML 上的属性需要使用破折号而不是驼峰式大小写。还有指令本身的名称：

"<cc-details show-credit-card-details=\"showCreditCardDetails\"></cc-details>"

关于其他属性，由于你的指令有一个独立的范围，你需要通过 HTML 元素传递你想要的所有对象。