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上的属性需要使用破折号而不是驼峰式。该指令的名称本身也是：

//Opens a dialog box when the button max-passage is clicked
$('#passage').dialog({
   autoOpen: false,
   title: 'Passage'
});
$('#max-passage').click(function() {
  $('#passage').dialog('open');
  return false;
});

关于其他属性，由于您的指令具有隔离范围，因此您需要通过HTML元素传递所需的所有对象。

角度隔离范围不绑定

1 个答案: