使用 ui bootstrap 和 angular 1.5 es6 - 组件不工作，去绑定未定义的参数

Question

我正在使用 angular 1.6 webpack es6 .

1 在 app.js 模块

中导入 bootstrap 如下（如何只导入模式？）

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 的事件，例如关闭关闭或将参数传递给 return 到 uibmodal.result.then()

有一个如何做到这一点的例子吗？

Answer 1

依赖于存在的绑定的初始化逻辑应该放在控制器的 $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

After the controller is instantiated, the initial values of the isolate scope bindings will be bound to the controller properties. You can access these bindings once they have been initialized by providing a controller method called $onInit, which is called after all the controllers on an element have been constructed and had their bindings initialized.

— AngularJS Comprehensive Directive API Reference - bindToController

Answer 2

是bindings，不是binding。

$uibmodal supports these bindings，所以这应该有效：

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

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

使用 ui bootstrap 和 angular 1.5 es6 - 组件不工作，去绑定未定义的参数

Using ui bootstrap with angular 1.5 es6 - component is not working , go binding params undefined

angularjs

ecmascript-6

angular-ui-bootstrap

angular1.6

`bindToController`