Question

我正在使用有角度的1.6 webpack es6。

在app.js模块中如下导入了1个引导程序（如何仅导入moda？）

import uiBootstrap from 'angular-ui-bootstrap';

2-从服务调用uibmodal打开：

$uibModal.open({
    animation: true,
    backdrop:'static',
    component: 'testModal',
    windowClass: "class",
    windowTopClass: "class2",
    resolve: {
        data: function(){
           return data;
        }
    }})

3-创建了一个像这样的组件：

class TestModalController{
    constructor(){
        console.log(this.resolve) . // got undefined
        console.log(this.close) // got undefined
        console.log(this.dismiss) // got undefined
    }

    $onInit(){
// not working also if i tryinh to get the binding here

    }
}



const TestModalComponent = {
    binding:{
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
    template: TestModalTemplate,
    controller: TestModalController
};

export default TestModalComponent;

如果打开HTML，则会看到生成了以下组件：

<test-modal resolve="$resolve" modal-instance="$uibModalInstance"
            close="$close($value)" dismiss="$dismiss($value)"
            class="ng-scope ng-isolate-scope"> ......</test-modal>

问题是我不确定，无法绑定uibmodal中的事件，如关闭dismiss或传递参数以返回uibmodal.result.then（）

有一个示例该怎么做？

Answer 1

它是bindings，而不是binding。

$uibmodal supports these bindings，因此可以正常工作：

const TestModalComponent = {
    bindings:{
        resolve: '<',
        close: '&',
        dismiss: '&'
    },
    template: TestModalTemplate,
    controller: TestModalController
};

正如在另一个答案中所指出的那样，绑定不是出现在构造函数中而是出现在$onInit挂钩中。

Answer 2

依赖于存在的绑定的初始化逻辑应放在控制器的$onInit()方法中：

class TestModalController{
    constructor(){
        //NOT HERE
        //console.log(this.resolve) // got undefined
        //console.log(this.close) // got undefined
        //console.log(this.dismiss) // got undefined
    }

    $onInit(){
        //DO IT HERE
        console.log(this.resolve) 
        console.log(this.close) 
        console.log(this.dismiss) 

    }
}

从文档中：

bindToController

实例化控制器后，隔离作用域绑定的初始值将绑定到控制器属性。您可以通过提供一种称为$onInit的控制器方法来访问这些绑定，一旦它们被初始化，就可以在构造元素上的所有控制器并对其绑定进行初始化之后调用该方法。

— AngularJS Comprehensive Directive API Reference - bindToController

将UI Bootstrap与angular 1.5 es6一起使用-组件不起作用，请转到未定义绑定参数

2 个答案:

`bindToController`