gpt4 book ai didi

javascript - Angular 1.5 组件中的 Angular Bootstrap Modal $uibModalInstance Unknown Provider

转载 作者:数据小太阳 更新时间:2023-10-29 05:51:46 28 4
gpt4 key购买 nike

当我尝试关闭 A ngular Bootstrap Modal在 Angular 1.5 组件中,它抛出 Error: $injector:unpr Unknown Provider .

如果我使用 Controller 而不是 Component,它工作正常。我错过了什么吗?

Demo at Plunker

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Angular Modal Demo</h1>
<my-content></my-content>
</body>
</html>

脚本

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

angular.module('app')
.component('myContent', {
template: 'I am content! <button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open Modal</button>',
controller: function ($uibModal) {
this.open = function () {
$uibModal.open({
template: '<my-modal></my-modal>'
});
};
}
});

angular.module('app')
.component('myModal', {
template: '<div class="modal-body">I am a modal! <button class="btn btn-warning" type="button" ng-click="$ctrl.close()">Close Modal</button></div>',
controller: function ($uibModalInstance) {
this.close = function () {
$uibModalInstance.dismiss('cancel');
};
}
});

最佳答案

我在使用 $uibModal 和 1.5 组件时遇到了同样的问题。解决问题我们需要使用 open 方法中使用的对象属性的 component 属性。

var modalInstance = $uibModal.open({
component: 'someComponentWithContent', //here name of component
resolve: {
user: function () {
return user; //example resolve
}
}
});

$uibModal 的文档说我们在组件中设置了以下属性:

close - A method that can be used to close a modal, passing a result. The result must be passed in this format: {$value: myResult}

dismiss - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: {$value: myRejectedResult}

modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.

resolve - An object of the modal resolve values. See UI Router resolves for details.

因此,我们需要在组件中使用 bindings 而不是使用依赖注入(inject)。

var someComponentWithContent={

bindings:{
modalInstance:"<",
resolve:"<"
},
controller:someComponentController,
template:"Some template"

};

最后一件事是如何在组件的 Controller 中使用它:

function someComponentController(){

//here example usage of dismiss
this.modalInstance.dismiss('cancel'); //this.modalInstance is $uibModalInstance

console.log(this.resolve); //here object with resolved params
}

关于javascript - Angular 1.5 组件中的 Angular Bootstrap Modal $uibModalInstance Unknown Provider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36919479/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com