Communication between Angular directives and their parent controller

Question

I'm trying to provide a convention, or standard, for a parent controller to communicate with a directive in Angular.

Basically the directive will have a "settings" object containing callbacks and initial data received from the controller, and an "api" object containing public functions.

I've created a service called "gabby" but it doesn't do much, just a convenience.

HTML

 <div ng-app="myApp" ng-controller="appCtrl">
 <my-dir settings="myDirSettings" api="myDirApi"></my-dir>
 </div>

Parent Controller

 angular.module('myApp').controller('appCtrl', function($scope) {
 $scope.myDirSettings = {
 onStart: function() {
 //start the logic
 },
 defaultName: 'My App Name'
 };
 $scope.someClick = function() {
 $scope.myDirApi.fetchData();
 }; 
 });

Directive

Just Angular

 angular.module('myApp').directive('myDir', function() {
 return {
 controller: 'myDirCtrl',
 scope: { settings: '<', api: '=' }
 };
 });

Or with the Gabby Service

 angular.module('myApp').directive('myDir', function(gabby) {
 return {
 controller: 'myDirCtrl',
 scope: gabby.scope()
 };
 });

Directive's Controller

Just Angular

 angular.module('myApp').controller('myDirCtrl', function($scope) {
 angular.extend($scope, {
 onStart: function() {},
 onSubmit: function() {},
 defaultName: 'John' 
 }, $scope.settings);
 $scope.api = $scope.api || {};
 $scope.api.clearValues = function() {
 //do magic things
 };
 $scope.api.fetchData = function() {
 //do magic things
 };
 $scope.api.getValues = function() {
 //do magic things
 }; 
 $scope.onSomeKeyPress = function() { 
 $scope.onStart();
 };
});

Or with the Gabby Service

 angular.module('myApp').controller('myDirCtrl', function($scope, gabby) {
 gabby.for($scope)
 .settings({
 //These are the default settings for the directive,
 //allowing the reader to easily understand what can
 //be passed to the directive
 onStart: function() {},
 onSubmit: function() {},
 defaultName: 'John' 
 })
 .api({
 //These are the public functions of the directives
 clearValues: function() {
 //do magic things
 },
 fetchData: function() {
 //do magic things
 },
 getValues: function() {
 //do magic things
 }
 });
 $scope.onSomeKeyPress = function() { 
 $scope.onStart();
 };
 });

More details: https://github.com/yellowblood/gabby

• Am I trying to solve an already solved problem?
• Do you think this approach is readable and clear?

Answer 1

Usually you'd use a service as an intermediary between the directive and the component. Change the state of a service in a directive and then the controller can look at the data in the service for whatever it's interested in.