如何使用 Angular 1.5 *components* 和 UI Bootstrap Modal 解析答案

【问题标题】：How to use resolve with Angular 1.5 *components* and UI Bootstrap Modal如何使用 Angular 1.5 *components* 和 UI Bootstrap Modal 解析
【发布时间】：2017-02-15 12:29:07
【问题描述】：

我正在尝试使用解析将数据传递给ubi modal，它是一个 Angular 1.5 组件。我知道这是可能的，因为它表明 uib 模态文档中的组件支持解析。

component (Type: string, Example: myComponent) - 一个字符串引用使用 Angular 注册的要渲染的组件编译器。如果使用指令，该指令必须有限制：'E' 以及一个模板或 templateUrl 集。

它支持这些绑定：

(...)

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

我找到的所有示例都在 open 方法中声明了 templateurl/controller。然后将 resolve 中声明的项目注入到控制器中。我将一个 Angular 1.5 组件传递给模态（不是 templateurl/controller），当我尝试从解析中注入项目时，我得到一个可怕的“未知提供者”错误。

这是我的代码。我正在尝试传递一个网址。

调用模型的组件控制器

ParentController.$inject = ['$uibModal'];

function ParentController $uibModal) {
  var $ctrl = this;

  $ctrl.openComponentModal = function(url) {
    var modalInstance = $uibModal.open({
      animation: false,
      component: "ImageModalComponent",
      resolve: {
        url: function() {
          return url;
        }
      }
    });
  };
}

模态组件中的控制器

ImageModalController.$inject = ['url'];

function ImageModalController(url) {
  var $ctrl = this;

  $ctrl.$onInit = function() {
    console.log(url);
  };

}

【问题讨论】：

标签： angularjs modal-dialog components resolve

【解决方案1】：

对于组件，需要将解析添加到绑定中，然后在隔离范围内可用。也就是说，在声明组件的时候加上resolve: '<'。

模态组件

var template = require('./image_modal.component.html');
var ImageModalController = require('./image_modal.controller');

module.exports = {
  template: template,
  bindings: {
    close: '&',
    resolve: ‘<‘
  },

  controller: ImageModalController
};

调用模型的组件控制器

ParentController.$inject = ['$uibModal'];
function ParentController $uibModal){
  var $ctrl = this;

     $ctrl.openComponentModal = function (urlFromClickEvent) {
        var modalInstance = $uibModal.open({
          animation: false,
          component: "ImageModalComponent",
          resolve: {
            url: function() {
              return url;
            }
          }
        });
      };
}

模态组件的控制器

ImageModalController.$inject = [];
function ImageModalController() {
  var $ctrl = this;
  
  $ctrl.$onInit = function () {
    console.log($ctrl.resolve.url);
  };
}

【讨论】：