Hello All,

Sometimes there is a situation in which one want to access data from Controller to Directive. So let's see how we can pass data from controller to directive in AngularJs

Step 1-

Sample Controller:

app.controller("KanbanController", function($scope, Kanban) {
    $scope.getKanbanData = function(kanbanID) {
        Kanban.getKanban(user_id).then(function(response) {
            $scope.widget = response; // Accessible to html
        });
    }
}
});

Step 2-

Sample Html file:

In below example, controller data is passed to the directive using data variable in directive tag i.e "data = widget.data".

<div kanban-component data="widget.data"></div>

Step 3 -

Sample Directive:

In Below example  “=” character with the object passed into the component property is a two-way binding approach which is used to pass data to the directive, as a result you can get data in $scope.component.

myApp.directive('kanbanComponent', function() {
    return {
        restrict: 'EA',
        scope: {
            component: '=data'  // Two-way model binding from the controller
        },
        controller: function($rootScope, $scope, ElasticAPI, $stateParams, $filter, sweet) {
            console.log($scope.component)
        },
        templateUrl: 'app/Views/kanban_component.html'
    };
});