未知提供程序：$modalInstanceProvider <- $modalInstance <- 用户设置模态实例控制器

Question

H 我每个人，请帮助我做这个技巧，让我的模态工作......我正在尝试创建一个模式来编辑用户帐户详细信息。为此，在我的标题中，我添加到视图中：

标题视图.html：

<li class="dropdown" dropdown>
<a href="javascript:;" class="dropdown-toggle" dropdown-toggle>
<span>
{{user.username}}
</span>
</a>
<ul class="dropdown-menu">  
<li>
<a ng-click="openUserSettings()">Settings</a>
</li>    
<li>
<a ng-click="logout()">Logout</a>
</li>
</ul>
</li>

在标头控制器中：

controllerScope.openUserSettings = function () {
$state.go('app.userSettings');
};

在我的用户控制器中：

app.controller('UsersSettingsController',
['$scope', '$modalInstance', 'user', 
function ($scope, $modalInstance, user) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'editAccount.html',
controller: 'UsersSettingsModalInstanceController'      
});
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
app.controller('UsersSettingsModalInstanceController',
['$scope', '$modalInstance', 
function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);

编辑帐户.html

<div ng-controller="UsersSettingsModalInstanceController">
<script type="text/ng-template" id="editAccount.html">  
<div class="modal-header">
<h3>Edit Profile</h3>
</div>
<div class="modal-body">
<div class="row">             
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" value="monitorUser2@carris">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="carris">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Monitor">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="monitorUser2@carris">
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" value="Save Changes">
<span></span>
<input type="reset" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>

最后是我的应用程序路由文件

.state('app.userSettings', {
url: '/allusers/settings/',
templateUrl: 'app/components/users/editAccount.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
insertBefore: '#load_styles_before',
files: ['assets/libs/chosen_v1.4.0/chosen.min.css',
'assets/libs/datatables/css/jquery.dataTables.css']
},
{ serie: true,
files: [
'assets/libs/chosen_v1.4.0/chosen.jquery.min.js',
'assets/libs/datatables/js/jquery.dataTables.js',
'assets/libs/bootstrap-datatables/bootstrap-datatables.js'
]}]).then(function () {
return $ocLazyLoad.load([
{
files: ['app/components/users/usersController.js',
'app/shared/layout/utils.js']
}
])
});
}]
},
data: {
title: 'Settings',
}
})

因此，我在"注销"选项上方的标题中添加了一个新选项，用户可以在其中更改配置文件信息。为此，当他单击"设置"时，它将弹出一个新的模式，他可以在其中更改信息。但是我在注入模态实例控制器时遇到了麻烦。

当我在"设置"中舔时，我得到

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- UsersSettingsModalInstanceController

Answer 1

将ModuleInstance 注入 Angular Module。

var MyApp = angular.module("MyController", ['$scope', '$uibModal', 'ui-bootstrap', '$etc', '$etc', '$etc', function($scope, $uibModal, $etc, $etc, $etc)]);

Answer 2

创建模块时，您需要调用 ui 引导程序的模块：

var app = angular.module('wavesys.app.routes', ['ui.bootstrap']);

文档摘录 (https://angular-ui.github.io/bootstrap/(

安装

一旦你下载了所有文件并包含在你的页面中，你只需要声明对ui.bootstrap模块的依赖：

angular.module('myModule', ['ui.bootstrap']);