参数不在角度模态中解析

时间:2015-08-30 00:16:16

标签: javascript html angularjs twitter-bootstrap

我正在创建一个简单的更新模式。为此,我将一个参数传递给我的angular-bootstrap模态。我有两个控制器,ModalCtrl和ModalInstanceCtrl:

adminController.controller('ModalCtrl', ['$scope', '$modal', '$log', 'Profile',
        function ($scope, $modal, $log, Profile) {
    $scope.open = function (profile) {
        var modalInstance = $modal.open({
            animation: true,
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            resolve: {
                profile: function () {
                    $log.info(profile);
                    return profile;
                }
            }
        });
        modalInstance.result.then(function (updatedProfile) {
            $log.info(updatedProfile);
            Profile.post(updatedProfile);
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
}]);
adminController.controller('ModalInstanceCtrl', function ($scope, $modalInstance, profile) {
    $scope.ok = function () {
        $modalInstance.close(profile);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

在打开和接受模态时都会记录配置文件 - 让我相信它会毫无问题地传递到实例中。但是,显示模式不会显示该配置文件对象中的任何内容:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">Profile View</h3>
    </div>
    <div class="modal-body">
        <div><p>{{profile.profileType}}</p></div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>

我做错了什么?

1 个答案:

答案 0 :(得分:1)

您需要将profile对象放在$scope上才能在HTML模板中访问它:

adminController.controller('ModalInstanceCtrl', function ($scope, $modalInstance, profile) {

    $scope.profile = profile;

    $scope.ok = function () {
        $modalInstance.close(profile);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});