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
I should note that when I switch outside the forumController, I get an error that it MessageText and MessageTitle are undefined. — xxdefaultxx
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

xxdefaultxx xxdefaultxx · Accepted Answer · 2016-02-13T04:37:03

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

passing variables into angular-ui modal

1 Answers