angularjs – 如何使用Angular 1.5 *组件*和UI Bootstrap模式进行解析

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

component (Type: string,Example: myComponent) – A string reference to
the component to be rendered that is registered with Angular’s
compiler. If using a directive,the directive must have restrict: ‘E’
and a template or templateUrl set.

It supports these bindings:

(…)

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

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

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

调用模型的组件控制器

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

对于组件,需要将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,resolve: {
            url: function() {
              return url;
            }
          }
        });
      };
}

作为模态的组件的控制器

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

angularjs – 如何使用Angular 1.5 组件和UI Bootstrap模式进行解析

猜你在找的Angularjs相关文章