未调用模态控制器

时间:2016-06-14 20:43:57

标签: javascript angularjs twitter-bootstrap

我正在学习角度js,并且我正在尝试加载错误模式,只要在休息调用期间发生任何错误。

以下是我的模态

<div class="modal-header">
    <h1>This is the title</h1>
</div>'
<div class="modal-body">
    {{errormessage}}
</div>

下面是我的父控制器,我在其下定义错误条件

angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare, $uibModal) {
    $scope.myInterval = 5000;
    $scope.noWrapSlides = false;
    $scope.active = 0;
    var slides = $scope.slides = [];
    var currIndex = 0;

    $scope.sendEnvName = function(data) {
        dataShare.sendEnvDetails(data);

        window.location.href = "query/queryboard.html";
    }

    $scope.addSlide = function (envName) {
        slides.push({
            text: envName,
            id: currIndex++
        });
    };

    $http.get("http://localhost:8080/getEnvList")
        .success(function (data) {
            for (var i in data) {
                $scope.addSlide(data[i].envName);
            }
        })
        .error(function (error) {
            $uibModal.open({
                templateUrl: 'error/ErrorModal.html',
                controller: ErrModalInstanceCtrl,
                size: 'sm',
                resolve:{
                    errormessage: function () {
                        console.log('lllllllllllll')
                        return "Some error occured";
                    }
                }
            });

            var ErrModalInstanceCtrl = function ($scope, $uibModalInstance, errormessage) {
                console.log(errormessage)
                $scope.items = items;

            };
        });

});

如果我不使用解析器或控制器,即我在占位符的位置硬编码一些字符串以获取错误消息,则会完全加载模态。我用谷歌搜索我找到了关于将控制器放在引号中的不同答案,但这也没有帮助。

请帮助我,不知道我哪里出错。

1 个答案:

答案 0 :(得分:1)

您必须在当前控制器外部注册模态控制器,然后使用controller方法将名称传递给$uibModal.open属性。

像这样:

// REGISTER THE MODAL CONTROLLER HERE
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', ModalInstanceCtrl);
ModalInstanceCtrl.$inject = ['$scope', '$uibModalInstance'];
function ModalInstanceCtrl($scope, $uibModalInstance) {

    $scope.item = "I'm your item";

    $scope.ok = function() {
        $uibModalInstance.close();
    };

    $scope.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
}

你的控制器:

    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: 'myModalContent.html',
        controller: 'ModalInstanceCtrl',  // The modal controller name ('ModalInstanceCtrl')
        size: size,
        resolve: {
            errormessage: function () {
                console.log('lllllllllllll')
                return "Some error occured";
            }
        }
    });

Plunker here