如何在AngularJS的頁面控制器中使用Component中的函數？

Question

我想使用我的page.controller中的一個組件的功能 首先，我不知道它是否可能？第二，如果可能的話，我該怎麼做？

這裏我有component.controller稱爲checkStatus，我要執行它裏面的功能，因此我ng-disabled變成false，我可以點擊SAVE按鈕。

testComponent.component.js：

export default { 
    template: temp, 
    controller: myComponentController, 
    controllerAs: 'vm', 
    bindings: { 
    popupMsg : '&' 
    } 
}; 

function myComponentController() { 
    'ngInject'; 

    this.popupMsg = function() { 
    alert("It is working!"); 
    this.checkStatus(); 
    }; 

    this.checkStatus = function() { 
    this.mustPass = true; 
    }; 

} 

myPage.controller.js：

export class MyPageController { 

    constructor() { 
    'ngInject' 
    ... 
    } 

    save() { 
    ... 
    } 
} 

myPage.html下：

<form> 
<test-component mandatory="vm.popupMsg()"> </test-component> 

<div> 
    <button type="submit" ng-click="vm.save()" ng-disabled="!vm.mustPass"> Save </button> 
</div> 
</form> 

Plunker for testing

Answer 1

您需要在您的testComponent上有output bindings。

testComponent.component.js

bindings: { 
    statusChange: '&' 

} 

function myComponentController() { 

    this.checkStatus = function() { 
     this.mustPass = true; 
     this.statusChange({$event: this.mustPass}); 
    }; 

的mypage.html

<test-component mandatory="vm.popupMsg()" status-change="vm.onStatusChange($event)"> </test-component>