Angular: external access to component

http://angularjs.org/

by Denni Adam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<div ng-controller="MyCtrl as ctrl">
  <div ng-click="onClick()">click me</div>
  <my-component remote-ready="setRemote(remote)"></my-component>
</div>

JavaScript

angular
  .module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.onClick = function() {
      if (remote) remote.remoteFunc();

    };
    var remote;
    $scope.setRemote = function(remoteObj) {
      remote = remoteObj;
    };
  })

.component('myComponent', {
  template: '<div ng-if="$ctrl.isParentPressed">Parent button pressed {{$ctrl.count}} times</div>',
  bindings: {
    remoteReady: '&'
  },
  controller: function() {
    var $ctrl = this;
    $ctrl.count = 0;
    $ctrl.isParentPressed = false;

    var remote = {
      remoteFunc: function() {
        $ctrl.isParentPressed = true;
        $ctrl.count++;
      }
    }

    $ctrl.remoteReady({
      remote: remote
    });
  }
})