How to pass value from controller to a directive

Question

This is my controller

var controller = app.controller('ctrl', ['$scope', function ($scope) {
$scope.months = ["January", "February", "March", "April",
                "May", "June", "July", "August", "September",
                "October", "November", "December"];
}]);

This is my Directive

app.directive('monthDirective', function () {

return {

    restrict: 'A',
    link: function (scope, elem) {

        var fromDate , toDate;
        scope.$watch('fromdate', function (newValue, oldValue) {
            fromDate = new Date(newValue);
            fromDate = moment(newValue, 'YYYY-MM-DD');
            console.log('newValue', newValue)
        });

        scope.$watch('todate', function (newValue, oldValue) {
            toDate = new Date(newValue);
            toDate = moment(newValue, 'YYYY-MM-DD');
            var range = moment.range(fromDate, toDate);
            console.log('toDate', toDate)
            range.by('months',function (moment) {
                moment.toArray('months');
                console.log('I am the array', moment.toArray('months'));
                var mom = moment.toArray('months');
                for (var i = 0; i <= scope.months.length; i++)
                {
                    for (var j = 0; j <= mom.length;j++)
                    {
                        if(scope.months[i] == mom[j][1])
                        {

                        }
                    }
                }

            });
        });

    }
  }
})

I want to get the access of $scope.months(present in my controller) in my directive to do some logic.

Can any one suggest me how to do this?

What do you actually need? Access to the parent scope or pass a variable to directive? — E. Abrakov, Jun 09 '16 at 06:48
I need to get access of $scope.months (which is in controller) in the directive — , Jun 09 '16 at 06:53

score 3 · Answer 1 · answered Jun 09 '16 at 06:50

3

Though you could use a childscope or no scope, a best practice is to use an isolated scope:

app.directive('monthDirective', function () {

return {
    scope: {
      months: '='
    },
    //The rest
  }
});

Usage:

<div month-directive months="months"></div>

answered Jun 09 '16 at 06:50

Robin-Hoodie

4,886
4
30
63

scope: true can be used too. – Silvinus Jun 09 '16 at 06:58
1

@Silvinus like I said, a childscope (scope: true) can be used as well but is a bad practice – Robin-Hoodie Jun 09 '16 at 06:59
Why bad ? It's depends of what you need. If your directive depends on a parent directive you can use scope: true. I agree with you if directive can be use in standalone. – Silvinus Jun 09 '16 at 07:05
1

@Silvinus Because then it can not be reused unless you name the scope properties in the parent controller the same in every location where you use the directive, thus creating a tight coupling – Robin-Hoodie Jun 09 '16 at 07:07
It's for that I said I agree with you only if directive can be use alone in other context. But in this case we don't know the use case... I just want to say scope: true isn't a bad practice. It's depend of what you need – Silvinus Jun 09 '16 at 07:09

score 2 · Accepted Answer · edited May 23 '17 at 10:29

By default the directive does't create child scope. So You can access the scope of your controller by default:

app.controller('myController', function ($scope) {
  $scope.test = 'test1';
});
app.directive('myDirective', function () {
  return {
    restrict: 'A',
    link: function (scope, elem) {
        console.log(scope.test)
    }
  }
})

http://plnkr.co/edit/5u2c3mYbLyAX4LIC82l2?p=preview

But NexusDuck is correct. A best practice is to use isolated scope for directive. So you can access the months by passing it in directive attribute

You can also read this. It is very detailed explanation of the scope inheriting.

How to pass value from controller to a directive

2 Answers2