Angular uibModal,Resolve,未知提供者
Angular uibModal, Resolve, Unknown Provider
我正在尝试通过服务公开一个"通用"模式 - 使用 Angular 的$uibModal。以下是该服务的定义:
angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {
var openCustomModal = function (size, title, message) {
var actionToPerformOnConfirm = action;
var modalInstance = $uibModal.open({
templateUrl : 'templates/CustomModal.html',
size: size,
resolve: {
title: title,
message: message
}
});
};
return {
openCustomModal: openCustomModal
};
}]);
没有什么太复杂的,上面。但是,它不起作用。如果我从对象中删除 resolve
属性,则服务有效;但是,如果我包含 resolve
属性,则会收到源自该属性的未知提供程序错误。
resolve
属性的文档如下:
(类型:对象)- 将被解析并传递给 控制器作为本地人;它等效于 路由器。
目标是能够为在其DOM中利用这些属性的模态提供一个模板,例如:
<div ng-controller="CustomModalController">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button class="ad-button ad-blue" type="button" ng-click="confirmAction()"></button>
<button class="ad-button ad-blue" type="button" ng-click="cancelAction()"></button>
</div>
</div>
我错过了什么导致此错误被抛出?
您有两个问题:
- 您需要在模态配置中定义控制器
- 您的 resolve 对象需要是
string
的映射:function
,其中string
是将注入到模态控制器中的依赖项的名称,function
是一个工厂函数,用于在实例化控制器时提供该依赖项。
工作示例:JSFiddle
JavaScript
angular.module('myApp', ['ui.bootstrap'])
.controller('MyModalController', MyModalController)
.directive('modalTrigger', modalTriggerDirective)
.factory('$myModal', myModalFactory)
;
function MyModalController($uibModalInstance, items) {
var vm = this;
vm.content = items;
vm.confirm = $uibModalInstance.close;
vm.cancel = $uibModalInstance.dismiss;
};
function modalTriggerDirective($myModal) {
function postLink(scope, iElement, iAttrs) {
function onClick() {
var size = scope.$eval(iAttrs.size) || 'lg'; // default to large size
var title = scope.$eval(iAttrs.title) || 'Default Title';
var message = scope.$eval(iAttrs.message) || 'Default Message';
$myModal.open(size, title, message);
}
iElement.on('click', onClick);
scope.$on('$destroy', function() {
iElement.off('click', onClick);
});
}
return {
link: postLink
};
}
function myModalFactory($uibModal) {
var open = function (size, title, message) {
return $uibModal.open({
controller: 'MyModalController',
controllerAs: 'vm',
templateUrl : 'templates/CustomModal.html',
size: size,
resolve: {
items: function() {
return {
title: title,
message: message
};
}
}
});
};
return {
open: open
};
}
.HTML
<script type="text/ng-template" id="templates/CustomModal.html">
<div class="modal-header">
<h3 class="modal-title">{{vm.content.title}}</h3>
</div>
<div class="modal-body">
{{vm.content.message}}
</div>
<div class="modal-footer">
<button class="ad-button ad-blue" type="button" ng-click="vm.confirm()">
confirm
</button>
<button class="ad-button ad-blue" type="button" ng-click="vm.cancel()">
cancel
</button>
</div>
</script>
<button modal-trigger size="'sm'" title="'Hello World!'" message="'This is a test'">
Click Me
</button>
相关文章:
- 对广告服务器的未知信标调用
- Axios spread()具有未知数量的回调参数
- 反汇编的javascript jit代码调用未知函数
- 未知”<#"构造
- Safari 5.1.7下载文件名未知的csv文件
- 带有 JavaScript 随机数函数的未知问题
- 哪个原型用于创建具有未知标记的节点
- xmlHttp.responseText未知错误定义
- JavaScript删除未知侦听器
- 因果报应测试中的未知提供者
- 有角度的“;未知提供者”;在约曼应用程序中使用Grunt Build缩小后出错
- 错误:$injector:unp未知提供者:未知提供者:bProvider<-b
- Angular uibModal,Resolve,未知提供者
- Angularjs - 未知的提供者:
- 当添加一个服务和一个过滤器或多个服务时,我在做什么导致未知提供者
- 永远运行sail.js+angularjs项目得到未知提供者:a
- 又一个'未知提供者'用于AngularJS服务
- AngularJS未知提供者
- 尽管其他控制器和服务工作,未知的提供者错误
- 因果报应错误:未知提供者