AngularJS - функция, объявленная в дочерней директиве, вызываемая в родительском контроллере

Question

Вызов функции на родительском контроллере , который объявлен в дочерней директиве .

Родительский контроллер HTML

<div ng-click="testFunction()"></div>

Родительский контроллер JS

  $scope.testFunction = function(){
    $scope.functionFromChildDirective()
  }

Детская директива js

function TestDirective() {

    return {
      restrict: 'EA',
      scope: {
      },  
      templateUrl: '',
      controller: function($scope) {
        "ngInject";

        $scope.functionFromChildDirective = function(){
          console.log("TEST")
        }

      }
    }
  }

  export default {
    name: 'testDirective',
    fn: TestDirective
  };

Answer 1

Используйте директиву ng-ref , чтобы связать контроллер с родительской переменной:

<test-directive ng-ref="testAPI">
</test-directive>

function TestDirective() {

    return {
      restrict: 'EA',
      scope: {
      },  
      templateUrl: '',
      controller: function() {
        this.testFn = function(){
          console.log("TEST")
        }

      }
    }
  }

Чтобы вызвать его:

<div ng-click="testAPI.testFn()"></div>

Директива ngRef указывает AngularJS назначить контроллер компонента (или директивы) данному свойству в текущей области.

Для получения дополнительной информации см. Справочник по API AngularJS ng-ref .

Answer 2

Просто удалите замедление пустой области, определив, что вы создаете новую изолированную область. Если вы не объявите область действия в объекте определения директивы, она просто унаследует родительскую область. Однако при таком подходе дочерняя директива может использоваться только один раз (то есть не может повторяться), поскольку каждый экземпляр просто перезаписывает свойство $ scope.functionFromChildDirective.