TypeError: providedScope.$new is not a function - angular bootstrap modal
TypeError: providedScope.$new is not a function - angular bootstrap modal
我一直在关注官方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.
控制器:
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();
依赖关系:
- Angular:
1.4.8
(从 0.3
升级而来)
- Angular-bootstrap:
2.4.0
(从 0.13.4
升级而来)
- Bootstrap:
3.3.7
- MEAN.JS:
0.4.2
阅读 MEAN.JS 文档,0.4.2
使用 angular-ui 0.13.4
,不支持 $uibModal
。因为不支持所以升级到2.4.0
。没有提到 MEAN.JS 0.4.2
不支持 angular-ui 2.4.0
但这可能是潜在的原因吗?
编辑:
我已经排除了依赖版本的可能性,因为我已经改回 MEAN.JS 堆栈 中带有“0.4.2”的默认版本(所以使用$modal
而不是 $uibModal
) 我得到了类似的错误:
TypeError: (modalOptions.scope || $rootScope).$new is not a function
vm
作为模态的父范围提供。这就是问题所在,因为 vm
不是范围。它是一个控制器实例和当前范围内的一个对象(如果使用 controllerAs
语法)。
vm
不应与 $scope
互换。应该是:
scope: $scope
我一直在关注官方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.
控制器:
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();
依赖关系:
- Angular:
1.4.8
(从0.3
升级而来) - Angular-bootstrap:
2.4.0
(从0.13.4
升级而来) - Bootstrap:
3.3.7
- MEAN.JS:
0.4.2
阅读 MEAN.JS 文档,0.4.2
使用 angular-ui 0.13.4
,不支持 $uibModal
。因为不支持所以升级到2.4.0
。没有提到 MEAN.JS 0.4.2
不支持 angular-ui 2.4.0
但这可能是潜在的原因吗?
编辑:
我已经排除了依赖版本的可能性,因为我已经改回 MEAN.JS 堆栈 中带有“0.4.2”的默认版本(所以使用$modal
而不是 $uibModal
) 我得到了类似的错误:
TypeError: (modalOptions.scope || $rootScope).$new is not a function
vm
作为模态的父范围提供。这就是问题所在,因为 vm
不是范围。它是一个控制器实例和当前范围内的一个对象(如果使用 controllerAs
语法)。
vm
不应与 $scope
互换。应该是:
scope: $scope