javascript - 如何在 AngularJS 的页面 Controller 中使用 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() {
    ...
  }
}

我的页面.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

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

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>