Question

我有一个这样的模型控制器：

pcApp.controller("ModalInstanceController", function ($scope, $modalInstance, model) {

    $scope.claim = model;
    $scope.payNow = function () {
        $modalInstance.close("now");
    };
    $scope.refuse = function () {
        $modalInstance.close("later");
    };
    $scope.payLater = function () {
        $modalInstance.dismiss("cancel");
    };
});

模态模板是：

<script type="text/ng-template" id="newClaimPopup.html">
    <div class="modal-header">
        <h3 class="desktop">PayCaddy Claim</h3>
    </div>
    <div class="modal-body">
        <p>{{claim.SenderFullName}} is claiming an amount of R{{claim.Amount}} for a golfing bet with him that you lost, with the message:</p>
        <br />
        <p>{{claim.Description}}</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="payNow()">Yes</button>
        <button class="btn btn-danger" type="button" ng-click="refuse()">Refuse</button>
        <button class="btn btn-warning" type="button" ng-click="payLater()">Later</button>
    </div>
</script>

这是_Layout.cshtml中包含的部分视图：

    <div id="claim-notice-template">
        @Html.Partial("_NewClaimPopupTemplate")
    </div>

我使用此代码显示模态：

$scope.showNewClaimPopup = function (viewModel) {
    $scope.claim = viewModel;
    var modalInstance = $modal.open({
        animation: $scope.animationsEnabled,
        templateUrl: "newClaimPopup.html",
        controller: "ModalInstanceController",
        size: "sm",
        resolve: {
            model: function () {
                return $scope.claim;
            }
        }
    });

    modalInstance.result.then(function () {
        debugger;
        $log.info("Modal accepted at: " + new Date());
    }, function () {
        $log.info("Modal dismissed at: " + new Date());
    });
};

传递给viewModel的{{1}}参数有效且已完全填充。 $scope.showNewClaimPopup的{{1}}选项也有效，因为在resolve我可以看到open参数是相同的有效视图模型。然而，当模态显示时，绑定模板都是空白的。

显示的所有代码都在一个ModalInstanceController中分配给围绕所有内容的model，包括包含模态模板的部分代码。

为什么模板没有按预期绑定？

Answer 1

您需要传递$scope以用于编译模态模板：

var modalInstance = $modal.open({
    scope: $scope, // <--- this line is necessary
    animation: $scope.animationsEnabled,
    templateUrl: "newClaimPopup.html",
    controller: "ModalInstanceController",
    size: "sm",
    resolve: {
        model: function () {
            return $scope.claim;
        }
    }
});

如果您未提供scope配置，则模态将创建$rootScope的新子范围，显然不包含claim对象。

Angular Modal不绑定到范围属性

1 个答案: