Question

当我尝试关闭Angular 1.5组件中的A ngular Bootstrap Modal时，它会抛出Error: $injector:unpr Unknown Provider。

如果我使用控制器而不是组件，它可以正常工作。我错过了什么吗？

<!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');
          };
      }
  });

Answer 1

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

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

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

close - 一种可用于关闭模态，传递结果的方法。   结果必须以这种格式传递：{$ value：myResult}

dismiss - 一种可用于解除模态，传递一个模态的方法   结果。结果必须以这种格式传递：{$ value：   myRejectedResult}

modalInstance - 模态实例。这与$ uibModalInstance相同   使用控制器时发现注射剂。

resolve - 模态解析值的对象。请参阅UI路由器   为细节做出决定。

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

var someComponentWithContent={

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

};

最后一件事如何在组件的控制器中使用它：

function someComponentController(){

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

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

Answer 2

Plunker：http://localhost:8080/oauth2callback

您需要在此处添加ui.bootstrap作为依赖项：

angular.module('app').component('myModal'...

变为

angular.module('app', ['ui.bootstrap']).component('myModal'...

为清楚起见，为避免重新输入，请执行以下操作：

var app = angular.module('app', [ /* dependencies here */ ]);
app.controller();
app.config();
//etc.. etc...

Answer 3

Maciej Sikora是对的。但是你还需要将ui bootstrap更新为版本＆gt; 2.1.0，否则它不会工作。

Angular 1.5组件中的Angular Bootstrap Modal $ uibModalInstance未知提供程序

脚本

3 个答案: