CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
Chris Chevalier
Chris Chevalier

Reputation: 650

Modal is coming back undefined in directive

Google is giving me the error: "TypeError: Cannot read property 'open' of undefined" in response to my ui-bootstrap module. I've been using other ui-bootsrap directives fine.

Am I not declaring the modal dependency correctly?

angular.module('ireg').directive('study', function (studyFactory) {
return {
    restrict:'E',
    scope: {             
        objectid:'@objectid'
    },
    templateUrl: '/ireg/components/study/study.html',

    link: function (scope, element, attrs, $modal) {

        scope.openMilestonesDialog = function () {
            var modalInstance = $modal.open({
                animation: $scope.animationsEnabled,
                templateUrl: '/ireg/components/add-milestones/addMilestonesDialog.html',
                controller: '/ireg/components/add-milestones/addMilestonesDialogController.js',
                size: lg
            });
        };

    }//end of link

}
});

angular.module('ireg').controller('addMilestonesDialogController', function ($scope, $modalInstance, studyId) {

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


});

Upvotes: 0

Views: 217

Answers (2)

Ilya Dmitriev
Ilya Dmitriev

Reputation: 1720

You should include $modal service in your directive function instead of link function:

angular.module('ireg').directive('study', function (studyFactory, $modal) {
    return {
        restrict:'E',
        scope: {             
            objectid:'@objectid'
        },
        templateUrl: '/ireg/components/study/study.html',

        link: function (scope, element, attrs) {

            scope.openMilestonesDialog = function () {
                var modalInstance = $modal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: '/ireg/components/add-milestones/addMilestonesDialog.html',
                    controller: '/ireg/components/add-milestones/addMilestonesDialogController.js',
                    size: 'lg'
                });
            };

        }//end of link

    }

});

And yes, Alberto I.N.J. is right, you should set size attribute as string.

Upvotes: 1

dhavalcengg
dhavalcengg

Reputation: 4713

You should inject $model into directive itself and change lg to 'lg'

angular.module('ireg').directive('study', function (studyFactory, $modal) {
    return {
        restrict:'E',
        scope: {             
            objectid:'@objectid'
        },
        templateUrl: '/ireg/components/study/study.html',

        link: function (scope, element, attrs) {

            scope.openMilestonesDialog = function () {
                var modalInstance = $modal.open({
                    animation: $scope.animationsEnabled,
                    templateUrl: '/ireg/components/add-milestones/addMilestonesDialog.html',
                    controller: '/ireg/components/add-milestones/addMilestonesDialogController.js',
                    size: 'lg'
                });
            };

        }//end of link

    }

});

Upvotes: 1

Related Questions