使用两种模式时出错:[$injector:unpr] 未知提供程序:$modalInstanceProvider <-
Error while using two modals: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
我真的发现很难解决上述错误。我的项目中有两种模式。其中一个模态工作正常,另一个模态则不然。我已经在创建第一个模态的控制器中注入了$modal作为依赖项,并且我已经$modalInstance作为依赖项注入到modalController中,它对我来说工作正常。我尝试使用相同的步骤再创建一个模态,但遇到了未知的提供程序$modalInstance错误。任何答案将不胜感激。
这是我的第一个模态的代码。
控制器:
angular.module('menu').controller('HeaderNavbarController', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.signin = function() {
console.log('in signin');
var modalnstance = $modal.open({
templateUrl: '/modules/users/client/views/authentication/signin.client.view.html',
controller: 'AuthenticationController',
size: 'lg',
resolve: {
items: function() {
return $scope.items;
}
}
});
modalnstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
console.log('$scope.selected', $scope.selected);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};}]);
视图:
<div class="header-container top-header" ng-controller="HeaderNavbarController">
<li><a ng-click="signin()">SIGN IN</a></li>
</div>
模态控制器:身份验证控制器
angular.module('users').controller('AuthenticationController', ['$scope', '$modalInstance',
function($scope, $modalInstance) {
$scope.cancel=function(){
$modalInstance.close();
}
}
]);
模态模板:登录.客户端.视图
<div>
<button ng-click="cancel()">cancel</button>
</div>
第二模态的代码
控制器
angular.module('menu').controller('ScripsController', ['$scope', '$modal', '$log',
function($scope, $modal, $log) {
$scope.focusInput = function() {
console.log('in signin');
var modalnstance = $modal.open({
templateUrl: '/modules/menu/client/views/search.popup.html',
controller: 'SearchController',
size: 'lg',
resolve: {
items: function() {
return $scope.items;
}
}
});
modalnstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
console.log('$scope.selected', $scope.selected);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};}]);
模态视图(HTML):搜索.popup.html
<div class="search-popup">
<button ng-click="closeSearch()">cancel</button>
</div>
模态控制器:搜索控制器
angular.module('menu').controller('SearchController', ['$scope', '$modalInstance',
function($scope, $modalInstance) {
$scope.closeSearch=function(){
$modalInstance.close();
}
}
}]);
我在搜索控制器中收到未知的注射器$modalInstance。提前谢谢。
这很可能意味着您最近已将 ui-bootstrap 从 0.14 之前的版本升级到 0.14 之后的版本。
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes#modal
模 态
- 变化:$modal$uibModal。
- 变化:$modalInstance$uibModalInstance。
- 更改:modal-transclude for uib-modal-transclude
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- keyup事件处理程序更改焦点不适用于快速键入
- 用程序搜索JQuery数据表中的文本
- Javascript:selenium Web驱动程序isDisplayed()不工作
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- Emberjs应用程序加载在除Index之外的所有路由上
- ExtJS 5用程序点击actioncolumn gridview
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 如何从Java/scala调用js美化程序
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- angular 1.5应用程序中的导航栏
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 如何创建带有插槽的vue js组件预加载程序
- Webpack/Rect:遵循egghead.io教程,但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 在Windows 10中自动执行例行程序(主要与浏览器交互)
- 在Web应用程序中使用Highcharts javascript
- 递归使用 eval() 是检查程序执行的好方法吗?
- angularjs+rails应用程序中未显示模板
- 提示使用服务器端事件处理程序激活JavaScript