Angularjs 将函数从控制器分离到指令

我理解角度控制器应尽量不执行繁重的逻辑计算

我的控制器中有一个函数，从当前月份开始获取12个月的列表：

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;
    }


});

app.controller（“MyController”，函数（$scope）{
$scope.getLast12Months=函数（）{
变量日期=新日期（）；
var月数=[]，
月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月]；
对于（变量i=0；i<12；i++）{
monthNames[date.getMonth（）]+''+date.getFullYear（））；
//每次减去一个月
date.setMonth（date.getMonth（）-1）；
}
$scope.months=个月；
返回月份；
}
});

并通过以下方式显示在我的HTML中：

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

{[{months}]}

我尝试通过以下方式将其写入指令：

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;
    }
});

app.directive（“ngGetLast12个月”，函数（）{
返回函数（$scope）{
变量日期=新日期（）；
var月数=[]，
月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月]；
对于（变量i=0；i<12；i++）{
monthNames[date.getMonth（）]+''+date.getFullYear（））；
//每次减去一个月
date.setMonth（date.getMonth（）-1）；
}
$scope.months=个月；
返回月份；
}
});

在HTML中：

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

{[{months}]}

我可以通过console.log看到我的指令被触发，但输出显示为：

[“2014年5月”、“2014年4月”、“2014年3月”、“2014年2月”、“2014年1月”、“2013年12月”、“2013年11月”、“2013年10月”、“2013年9月”、“2013年8月”、“2013年7月”、“2013年6月”]

而不是ng重复显示为：

2014年5月2014年4月2014年3月2014年2月2014年1月2014年12月2013年11月2013年10月2013年9月2013年8月2013年7月2013年6月

---

根据工程师的示例进行更新

但是看到：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;
  }
};
});

app.directive（'ngGetLast12Months'，函数（）{
返回{
替换：正确，
限制：“EA”，
模板：“{[{month}]}”，
链接：功能（$scope）{
变量日期=新日期（）；
var月数=[]，月数=[
“一月”，
二月,，
“三月”，
“四月”，
“五月”，
"六月",，
七月,，
"八月",，
"九月",，
“十月”，
十一月,，
“十二月”
];
对于（变量i=0；i<12；i++）{
monthNames[date.getMonth（）]+''+date.getFullYear（））；
//每次减去一个月
date.setMonth（date.getMonth（）-1）；
}
$scope.months=个月；
返回月份；
}
};
});

创建如下指令：

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;
        }
    };
});

app.directive（“ngGetLast12个月”，函数（）{
返回{
替换：正确，
限制：“EA”，
模板：“{[{month}]}”，
链接：功能（$scope）{
//您的代码的计算结果为'months'`
$scope.months=个月；
}
};
});

创建如下指令：

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;
        }
    };
});

app.directive（“ngGetLast12个月”，函数（）{
返回{
替换：正确，
限制：“EA”，
模板：“{[{month}]}”，
链接：功能（$scope）{
//您的代码的计算结果为'months'`
$scope.months=个月；
}
};
});

创建如下指令：

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;
        }
    };
});

app.directive（“ngGetLast12个月”，函数（）{
返回{
替换：正确，
限制：“EA”，
模板：“{[{month}]}”，
链接：功能（$scope）{
//您的代码的计算结果为'months'`
$scope.months=个月；
}
};
});

创建如下指令：

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;
        }
    };
});

app.directive（“ngGetLast12个月”，函数（）{
返回{
替换：正确，
限制：“EA”，
模板：“{[{month}]}”，
链接：功能（$scope）{
//您的代码的计算结果为'months'`
$scope.months=个月；
}
};
});

我看不出有什么理由在指令中这样做。这是服务中应该包含的代码。然后控制器可以在作用域上公开它，html仍然可以使用ng repeat来显示它

您的指令给出不同响应的原因是，它的工作方式与ngRepeat不同。ngRepeat使用内部html作为模板，并在循环的每次迭代中执行它。因此它为数组中的每个元素克隆DOM位，然后插值该值。您的指令只是构建一个数组并直接输出该数组，因此您可以在DOM中获得该数组的json版本

---

如果您真的想在指令中执行此操作，我会保持简单并使用指令的模板选项。这将允许您使用ngRepeat在指令的link函数中计算的值上进行迭代。

我看不出指令中有这样的原因。这是服务中应该包含的代码。然后控制器可以在作用域上公开它，html仍然可以使用ng repeat来显示它

您的指令给出不同响应的原因是，它的工作方式与ngRepeat不同。ngRepeat使用内部html作为模板，并在循环的每次迭代中执行它。因此它为数组中的每个元素克隆DOM位，然后插值该值。您的指令只是构建一个数组并直接输出该数组，因此您可以在DOM中获得该数组的json版本

---

如果您真的想在指令中执行此操作，我会保持简单并使用指令的模板选项。这将允许您使用ngRepeat在指令的link函数中计算的值上进行迭代。

我看不出指令中有这样的原因。这是服务中应该包含的代码。然后控制器可以在作用域上公开它，html仍然可以使用ng repeat来显示它

原因