javascript - Angular Modal 不绑定(bind)到范围属性

Question

我有一个像这样的模型 Controller :

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中包含的部分 View :

    <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());
    });
};

传递给 $scope.showNewClaimPopup 的 viewModel 参数有效且已完全填充。 open 的 resolve 选项也有效，因为在 ModalInstanceController 中我可以看到 model 参数是相同的有效的 View 模型。然而，当模式显示时，绑定(bind)模板都是空白的。

显示的所有代码都位于分配给包围所有内容(包括包含模式模板的部分)的 div 的一个 MainController 中。

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

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 对象。