• The project required me to write a directive for a canvas, get the Base64 image data when a user draws on it, and make it available to the controller of the page which contains the directive.
• This boils down to the fact that you need to access the scope of a Directive from a page Controller and access the scope of a page Controller from a Directive.
• Now let’s say we have the following controller: – – And the following template: – – The problem: we would like to bind the count variable of myCtrl to the internalCount variable of the counter directive.
• This can easily be solved by binding a variable from the controller to the scope of the directive.
• Your directive should now look like this: – – And your template like this: – – You will find a working fiddle here with all the code to this quick tutorial on how to exchange data between a directive and controller in AngularJS.

@creative_punch: How to exchange data between a directive and controller in #AngularJS

—
#webdev #programming #JavaScript #dev

AngularJS is an amazing JavaScript library and an excellent framework for any modern web application of any scale.

As with any large and complex framework such as AngularJS, a lot is possible.

Today I will demonstrate one of the problems I had to work around on a project for a client. The solution, however, is amazingly simple and elegant.

The project required me to write a directive for a canvas, get the Base64 image data when a user draws on it, and make it available to the controller of the page which contains the directive.

To do this I had to find out how to exchange data between a Directive and Controller in AngularJS.

This boils down to the fact that you need to access the scope of a Directive from a page Controller and access the scope of a page Controller from a Directive.

These scopes are isolated from each other. So in order to do this we need to emulate the ng-model behavior of an input in our Directive.

Let’s take a simple example and make a directive that has a counter which goes up by one every second.

var app = angular.module(‘myApp’, []) app.directive(‘counter’, function($timeout) { return { restrict: ‘EAC’, template: `

Directive Counter: {{internalCount}}

`, link: function($scope, element) { $scope.internalCount = 0; function addCount() { $timeout(function() { $scope.internalCount += 1; addCount(); }, 1000) } addCount(); } }; } )

By…