Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to pass data from controller to directive in AngularJs?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.70k
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: