TypeError: providedScope. $ New не является функцией - угловой bootstrap modal

Question

Я следующие официальные руководства here, но все еще получаю ошибку. Пользователь на GitHub испытал ту же проблему, но не упомянул, как это было разрешено, только в том, что в его коде появилась ошибка, вызывающая его фабрику, и я не смог ничего выяснить из его plnkr.

Контроллер:

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

Вид:

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

Ошибка в ui.bootstrap-tpls здесь:

var modalScope = providedScope.$new(); 

зависимостями:

• Угловые: 1.4.8(повышен с 0.3)
• радиально-самозагрузки: 2.4.0(повышен с 0.13.4)
• Бутстрап: 3.3.7
• MEAN.JS: 0.4.2

Чтение на документах MEAN.JS, 0.4.2 использует угловой-ui 0.13.4, который не поддерживает $uibModal. Из-за того, что я не поддерживаю его, именно поэтому я обновился до 2.4.0. Нет упоминания о MEAN.JS 0.4.2, не поддерживающем угловую-ui 2.4.0, но может ли это быть потенциальной причиной?


EDIT:

Я исключил, что это до версии зависимостей, как я изменился назад к умолчанию, которые приходят с «0.4.2» в стеке MEAN.JS (так что использование $modal вместо $uibModal) и я получаю подобную ошибку:

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

Answer 1

vm предоставляется в качестве родительской области для модальной. В этом проблема, потому что vm не является областью. Это экземпляр контроллера и объект в текущей области (если используется синтаксис controllerAs).

vm не должен быть взаимозаменяемым с $scope. Это должно быть:

scope: $scope