CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrapangular-ui-modal
xxdefaultxx
xxdefaultxx

Reputation: 175

passing variables into angular-ui modal

I'm having some issues transferring the modal example from the angular-ui documentation here: https://angular-ui.github.io/bootstrap/#/getting_started

I keep running into this error:

Argument 'ModalInstanceCtrl' is not a function, got undefined

controller:

  (function () {
    'use strict';

    angular
        .module('projMgrApp')
        .controller('forumController', forumController)

    forumController.$inject = ['$scope', '$window', '$uibModal', 'Notices'];

    function forumController($scope, $window, $uibModal, Notices) {
        $scope.Notices = Notices.query();
        $scope.successText = "Temp Success Message";
        $scope.MessageTitle = "Temp Msg Title";
        $scope.MessageText = "Temp Msg Text";

        angular.module('projMgrApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, MessageText, messageTitle) {
            $scope.MessageText = MessageText;
            $scope.MessageTitle = MessageTitle;
            $scope.ok = function () {
                $uibModalInstance.close();
            };

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


        $scope.OnAddNoticeClick = function () {
            var EditNoticeModal = $uibModal.open({
                templateUrl: 'add-edit-modal.html',
                controller: 'ModalInstanceCtrl',
                resolve: {
                    MessageText: function () { return $scope.MessageText },
                    MessageTitle: function () { return $scope.MessageTitle }
                }
            });
        };
    }
})();

the modal is spawned from a ui button that runs the OnAddNoticeClick fn.

Upvotes: 1

Views: 600

Answers (1)

xxdefaultxx
xxdefaultxx

Reputation: 175

I managed to get it to work by switching the style of controller to:

angular.module('projMgrApp')
    .controller('ModalInstanceCtrl', ModalInstanceCtrl);

ModalInstanceCtrl.$inject = ['$scope', '$uibModalInstance', 'MessageText', 'MessageTitle'];

function ModalInstanceCtrl($scope, $uibModalInstance, MessageText, MessageTitle) {
        $scope.MessageText = MessageText;
        $scope.MessageTitle = MessageTitle;
        $scope.ok = function () {
            $uibModalInstance.close();
        };

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

Upvotes: 1

Related Questions