Angular Modal未绑定到范围属性

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

传入$scope.showNewClaimPopup的viewModel参数有效且已完全填充。 open的resolve选项也起作用，因为在ModalInstanceController我可以看到model参数是相同的有效viewmodel。 但是，当模式显示时，绑定模板都是空白的。

所示的所有代码都在一个MainController中，该MainController分配给div围绕着所有内容，包括包含模态模板的部分。

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

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