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'
};
});
0 Comment(s)