Separating functions from Controllers to Directives

Question

I understand that Angular controllers should try not to perform heavy logic calculations.

I have a function within my controller that gets a list of 12months from the current month:

app.controller("MyController", function($scope) {

    $scope.getLast12Months = function () {

        var date = new Date();
        var months = [],
            monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        for(var i = 0; i < 12; i++) {
            months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());

            // Subtract a month each time
            date.setMonth(date.getMonth() - 1);
        }
        $scope.months = months;

        return months;
    }


});

And displayed in my HTML via:

<th ng-repeat="months in getLast12Months()">{[{ months }]}</th>

Ive tried putting this into a directive via:

app.directive("ngGetLast12Months", function () {
return function ($scope) {

var date = new Date();
     var months = [],
            monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
        for(var i = 0; i < 12; i++) {
            months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());

            // Subtract a month each time
            date.setMonth(date.getMonth() - 1);
        }
        $scope.months = months;

        return months;
    }
});

And in the HTML:

<th ng-get-last-12-months>{[{ months }]}</th>

I can see my directive is being triggered via a console.log, but the output is appearing as:

["May 2014","Apr 2014","Mar 2014","Feb 2014","Jan 2014","Dec 2013","Nov 2013","Oct 2013","Sep 2013","Aug 2013","Jul 2013","Jun 2013"]

Rather than the ng-repeat fashion displaying as:

May 2014 Apr 2014 Mar 2014 Feb 2014 Jan 2014 Dec 2013 Nov 2013 Oct 2013 Sep 2013 Aug 2013 Jul 2013 Jun 2013

UPDATE Based on Engineer's Example

However seeing: Error: [$compile:tplrt] errors.angularjs.org/1.2.8/$compile/…

app.directive('ngGetLast12Months', function () {
return {
  replace: true,
  restrict: 'EA',
  template: '<th ng-repeat="month in months">{[{ month }]}</th>',
  link: function ($scope) {
    var date = new Date();
    var months = [], monthNames = [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ];
    for (var i = 0; i < 12; i++) {
      months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
      // Subtract a month each time
      date.setMonth(date.getMonth() - 1);
    }
    $scope.months = months;
    return months;
  }
};
});

@Skeptor - You're right, the <th> is causing that error, <div> works fine. I need it in a <th> however. — Oam Psy
– Oam Psy, Commented May 23, 2014 at 13:53

Vamshi · Accepted Answer · 2014-05-23 18:12:42Z

1

Here is the jsfiddle to this , http://jsfiddle.net/qF3KL/

This worked for me

html

<ng-get-last-12-months></ng-get-last-12-months>

js

.directive('ngGetLast12Months', function() {
    return {
        restrict: 'EA',
        template: '<th ng-repeat="month in months">{{month}}</th>',
        controller: function($scope) {
            var date = new Date();
            var months = [],
                monthNames = [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ];
            for (var i = 0; i < 12; i++) {
                months.push(monthNames[date.getMonth()] + ' ' + date.getFullYear());
                // Subtract a month each time
                date.setMonth(date.getMonth() - 1);
            }
            $scope.months = months;
        }
    };
});

edited May 23, 2014 at 18:12

answered May 23, 2014 at 13:11

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vamshi Over a year ago

strangely some reason , I am not able to make it work in local

Engineer · Accepted Answer · 2014-05-23 12:07:52Z

1

Create directive like this:

app.directive("ngGetLast12Months", function () {
    return {
        replace : true,
        restrict: 'EA',
        template: '<th ng-repeat="month in months">{[{ month }]}</th>',
        link: function ($scope) {
           //Your code which evaluates `months`
           $scope.months = months;
        }
    };
});

answered May 23, 2014 at 12:07

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

2 Comments

Oam Psy Over a year ago

im getting the following error trying the above: Error: [$compile:tplrt] errors.angularjs.org/1.2.8/$compile/… Have updated my question with a fuller version of your directive example.

Oam Psy Over a year ago

should i be calling this in my HTML via: <ng-get-last-12-months></ng-get-last-12-months>

Zerot · Accepted Answer · 2014-05-23 12:11:08Z

1

I don't see a reason why this should be in a directive. this is code that should be in a service. Then a controller can expose it on the scope and the html can still use ng-repeat to show it.

The reason why your directive is giving a different response, is because it works in a different way than ngRepeat. ngRepeat uses the inner html as a template and executes it every iteration of the loop you give it. So it clones that bit of DOM for every element in the array and then interpolates the value. Your directive just builds an array and outputs that array directly, so you get a json version of it in your DOM.

If you really want to do this in a directive, I would keep it easy and use the template option of directives. That will allow you to use ngRepeat to iterate over the values you calculate in the link function of your directive.

answered May 23, 2014 at 12:11

Zerot

1962 bronze badges

1 Comment

Zerot Over a year ago

because this answer was given before the "update" part of the question. and if you look, you can see that he was doing <th ng-get-last-12-months>{[{ months }]}</th> in the html without any ng-repeat over the months in the directive template(there was no directive template).

Collectives™ on Stack Overflow

Separating functions from Controllers to Directives

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related