CODEWITHSUNDEEP
angularjsangular-ui-bootstrapbootstrap-modalmeanjs
wmash
wmash

Reputation: 4202

TypeError: providedScope.$new is not a function - angular bootstrap modal

I have been following the official guides here but am still getting the error. A user on GitHub experienced the same issue but did not mention how it was resolved, only that there was an error in his code calling his factory and I wasn't able to figure out anything from his plnkr.

Controller:

function ActivitiesController($scope, $state, $window, Authentication, activity, $uibModal, $uibModalInstance) {
    var vm = this;

    vm.authentication = Authentication;
    vm.activity = activity;
    vm.openModal = openModal;
    vm.okOnModal = okOnModal;
    vm.cancelOnModal = cancelOnModal;

    function openModal() {
        $uibModal.open({
            template: "<div class='modal-header'>"
                        + "<h3 class='modal-title' id='modal-title'>Friends</h3>"
                    + "</div>"
                    + "<div class='modal-body list-group' id='modal-body'>"
                        + "<a ng-repeat='friend in vm.friends' class='list-group-item'>"
                            + "<img class='friend-user-profile-picture' ng-src='{{ friend.friend.profileImageURL }}' alt='{{ friend.friend.displayName }}'>"
                            + "<h4 class='list-group-item-heading' ng-bind='friend.friend.displayName'></h4>"
                            + "<small class='list-group-item-text' ng-bind='friend.friend.username'></small>"
                            + "<p class='list-group-item-text' ng-bind='friend.friend.email'></p>"
                            + "<input type='checkbox'>"
                        + "</a>"
                    + "</div>"
                    + "<div class='modal-footer'>"
                        + "<button class='btn btn-primary' type='button' ng-click='vm.okOnModal()'>OK</button>"
                        + "<button class='btn btn-warning' type='button' ng-click='vm.cancelOnModal()'>Cancel</button>"
                    + "</div>",
            size: 'lg',
            scope: vm
        });
    }

    function okOnModal() {
        $uibModalInstance.close();
    }

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

View:

<button class="btn btn-primary btn-lg" ng-click="vm.openModal()">Share with...</button>

The error is in ui.bootstrap-tpls here:

var modalScope = providedScope.$new();

Dependencies:

Reading on MEAN.JS docs, 0.4.2 uses angular-ui 0.13.4 which does not support $uibModal. Because of not supporting it, that's why I upgraded to 2.4.0. There is no mention of MEAN.JS 0.4.2 not supporting angular-ui 2.4.0 but could that be the potential reason?


EDIT:

I've ruled out that it's down to the dependency versions as I have changed back to the default ones that come with '0.4.2' in the MEAN.JS stack (so using $modal instead of $uibModal) and I get a similar error of:

TypeError: (modalOptions.scope || $rootScope).$new is not a function

Upvotes: 1

Views: 4653

Answers (1)

Estus Flask
Estus Flask

Reputation: 222503

vm is provided as parent scope for the modal. That's the problem, because vm is not a scope. It is a controller instance and an object on current scope (if controllerAs syntax is used).

vm isn't supposed to be interchangeable with $scope. It should be:

scope: $scope

Upvotes: 11

Related Questions