passing variables into angular-ui modal

Question

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.

its in there.. I've switched it in and out of the forum controller fn to see if it helped.. in the above reference its still in there.. — xxdefaultxx
– xxdefaultxx, Commented Feb 13, 2016 at 4:21
I should note that when I switch outside the forumController, I get an error that it MessageText and MessageTitle are undefined. — xxdefaultxx
– xxdefaultxx, Commented Feb 13, 2016 at 4:24
You have a lowercase "m" for your MessageTitle argument, but try to reference it with an capital "M," that's why you get a MessageTitle is undefined error. — rgthree
– rgthree, Commented Feb 13, 2016 at 4:30

xxdefaultxx · Accepted Answer · 2016-02-13 04:37:03Z

1

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

answered Feb 13, 2016 at 4:37

xxdefaultxx

1751 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

passing variables into angular-ui modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related