首页 文章

如何使用Angular 1.5 *组件*和UI Bootstrap Modal解析

提问于
浏览 次
8

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

component（Type：string，Example：myComponent） - 对Angular编译器注册的要呈现的组件的字符串引用 . 如果使用指令，则该指令必须具有restrict：'E'并设置模板或templateUrl . 它支持这些绑定：（...）resolve - 模态解析值的对象 . 有关详细信息，请参阅UI路由器 .

我发现的所有示例都在open方法中声明了templateurl / controller . 然后将在resolve中声明的项注入控制器 . 我将一个Angular 1.5组件传递给模态（不是templateurl / controller），当我尝试从resolve中注入项目时，我遇到了一个可怕的“unknow provider”错误 .

这是我的代码 . 我想通过一个网址 .

Controller of component calling the model

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

Controller in component that is the modal

ImageModalController.$inject = ['url'];

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

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

}
angularjs modal-dialog components resolve

1 回答

  • 11

    对于组件，需要将resolve添加到绑定中，然后在隔离范围上提供 . 换句话说，在声明组件时添加 resolve: '<' .

    Modal Component

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

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

  controller: ImageModalController
};

    Controller of component calling the model

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

    Controller of component that is the modal

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

相关问题