Как управлять функциями компонентных контроллеров извне

Question

У меня есть компонент с функцией внутри:

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>

Как это сделать?

Answer 1

Для доступа к функциям контроллеров компонентов используйте директиву 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-if или ng-repeat.

Создание контроллеров с синтаксисом «controllerAs» устраняет эту проблему.

Для получения дополнительной информации см.

• Справочник по API AngularJS ng-ref

Примечание: Директива ng-ref была добавлена ​​к AngularJS V1.7.1 Momentum-Defiance