如何从外部操作组件控制器的功能

How to operate functions of component controllers from outside

我有一个组件,里面有一个功能:

app.component("myComponent", {
    templateUrl: "myComponent.html",
    controller: function() {
        this.addApp = function (arg) {
            console.log(arg);
        };
    }
})

我想从组件外部操作该功能:

<my-component>
</my-component>

<button type="button" ng-click="something.addApp('Cheese')"
        class="btn-sm btn-default no-modal" >
  Add Application
</button>

怎么做?

要访问组件控制器的功能,请使用 ng-ref 指令:

<div ng-controller="ctrl as vm">
    <my-component ng-ref="vm.myComponent1">
    </my-component>

    <button type="button" ng-click="vm.myComponent1.addApp('Cheese')"
            class="btn-sm btn-default no-modal" >
      Add Application
    </button>
</div>

ng-ref 指令告诉 AngularJS 将组件(或指令)的控制器分配给当前范围内给定的 属性。

如果带有ng-ref的元素被销毁null分配给属性.

请注意,如果要从子范围分配到父范围,则必须在父范围上初始化目标 属性,否则 ng-ref 将在子范围上分配。这通常发生在分配包含在 ng-ifng-repeat.

中的元素或组件时

使用 "controllerAs" 语法实例化控制器避免了这个问题。

有关详细信息,请参阅

注意: ng-ref 指令已添加到 AngularJS V1.7.1 Momentum-Defiance