Javascript 如何创建为ng选项提供值的指令？

我有一些选择元素在整个应用程序中具有相同的选项，但看起来可能有点不同，例如选择用户的生日（日、月、年）

是否有办法创建一个指令，为

ng选项提供值/表达式

---

例如，

，其中

我的选项月份

将使用

ng选项

指令自动创建值为

1..12

的选项。

更新答案

app.directive('myOptionsMonths', function(){
  return {
    scope: {
      myOptionsMonths:"@"
    },
    link: function(scope,e, a){
      var N = +a.myOptionsMonths;
      scope.values  = Array.apply(null, {length: N}).map(Number.call, Number);
    },
    template: "<select ng-model='t' ng-options='o for o in values'></select>"
  };
}); 

<my-options-months my-options-months="10"></my-options-months>

您的指令如下所示：

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.selectedMonth = 3
})
    .directive('myOptionsMonths', function ($compile) {

    return {
        priority: 1001, // compiles first
        terminal: true, // prevent lower priority directives to compile after it
        compile: function (element, attrs) {
            element.attr("ng-options", "m for m in months");
            element.removeAttr('my-options-months'); // necessary to avoid infinite compile loop      
            var fn = $compile(element);
            return function (scope) {
                scope.months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                fn(scope);
            };
        }
    }
})

---

请用示例签出并修改更新的答案 您的指令如下所示：

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.selectedMonth = 3
})
    .directive('myOptionsMonths', function ($compile) {

    return {
        priority: 1001, // compiles first
        terminal: true, // prevent lower priority directives to compile after it
        compile: function (element, attrs) {
            element.attr("ng-options", "m for m in months");
            element.removeAttr('my-options-months'); // necessary to avoid infinite compile loop      
            var fn = $compile(element);
            return function (scope) {
                scope.months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                fn(scope);
            };
        }
    }
})

---

如果您计划在“选择”中创建一系列值，请使用示例签出，并将其放入模板中。如果范围必须是动态的，只需将其链接到指令中的属性即可

app.directive('myOptionsMonths', function(){
  return {
    scope: {
      myOptionsMonths:"@"
    },
    link: function(scope,e, a){
      var N = +a.myOptionsMonths;
      scope.values  = Array.apply(null, {length: N}).map(Number.call, Number);
    },
    template: "<select ng-model='t' ng-options='o for o in values'></select>"
  };
}); 

<my-options-months my-options-months="10"></my-options-months>

app.directive（'myOptionsMonths'，function（）{
返回{
范围：{
myOptionsMonths:“@”
},
链接：功能（范围、e、a）{
var N=+a.myoptions月数；
scope.values=Array.apply（null，{length:N}）.map（Number.call，Number）；
},
模板：“”
};
}); 

---

演示：

如果您计划在select中创建一系列值，只需将其放入模板中即可。如果范围必须是动态的，只需将其链接到指令中的属性即可

app.directive('myOptionsMonths', function(){
  return {
    scope: {
      myOptionsMonths:"@"
    },
    link: function(scope,e, a){
      var N = +a.myOptionsMonths;
      scope.values  = Array.apply(null, {length: N}).map(Number.call, Number);
    },
    template: "<select ng-model='t' ng-options='o for o in values'></select>"
  };
}); 

<my-options-months my-options-months="10"></my-options-months>

app.directive（'myOptionsMonths'，function（）{
返回{
范围：{
myOptionsMonths:“@”
},
链接：功能（范围、e、a）{
var N=+a.myoptions月数；
scope.values=Array.apply（null，{length:N}）.map（Number.call，Number）；
},
模板：“”
};
}); 

---

演示：

可以使用不同的方法，使用类似以下的过滤器：

.filter('range', function () {
        return function (input, min, max, padding){
            min = parseInt(min);
            max = parseInt(max);
            padding = padding ? padding : false;
            for (var i=min; i<=max; i++){
                input.push(padding ? ("00" + i).slice (-2) : i + '');
            }
            return input;
        };
    })

.filter（'range'，function（）{
返回函数（输入、最小值、最大值、填充）{
min=parseInt（min）；
max=parseInt（max）；
填充=填充？填充：false；
对于（var i=min；i可能采用不同的方法，使用如下过滤器：

.filter('range', function () {
        return function (input, min, max, padding){
            min = parseInt(min);
            max = parseInt(max);
            padding = padding ? padding : false;
            for (var i=min; i<=max; i++){
                input.push(padding ? ("00" + i).slice (-2) : i + '');
            }
            return input;
        };
    })

.filter（'range'，function（）{
返回函数（输入、最小值、最大值、填充）{
min=parseInt（min）；
max=parseInt（max）；
填充=填充？填充：false；
对于（var i=min；iThanks，但我希望避免创建整个select元素，以便能够轻松地向select元素本身添加任何附加属性，而不必为指令中的每个可能属性创建绑定。谢谢，但我希望避免创建整个select元素，以便能够轻松地向其添加任何附加属性选择元素本身，而不必为我的指令中的每个可能属性创建绑定。谢谢！还有一个问题：如何在此指令中从
ng model
访问属性，以便我可以设置
ng model
属性的默认值（如果为空/未定义）？顺便问一下。您能否简要解释一下
terminal
选项在这里是必需的？请注意，寻找答案的任何人：它不需要有终端指令（也不需要您自己编译它。您所需要的只是优先级>0（例如1），因此您的指令在
选择
指令之前编译。（可以找到一个更复杂的例子，它还为
ngModel
指定了一个默认值。）@ExpertSystem，我不明白为什么您的小提琴不能与Angular 1.4.x及以上版本配合使用？现在编译顺序是否有差异？您是否有可能提供一个与最新Angular兼容的小提琴？@c05mic:（Un）幸运的是，对
ngOptions
进行了重大重构，在1.4.x中它是一个自己的指令。因此，您确实需要有一个终端指令并手动编译（或多或少如本答案所示）。下面是一个（稍微改进的）@ExpertSystem非常感谢。这对我来说非常有效。谢谢！还有一个问题：我如何在本指令中从
ng model
访问属性，以便在
ng model
属性为空/未定义时设置其默认值？顺便问一句。您能否简要解释一下为什么这里需要
terminal
选项？注意对于寻找答案的任何人：它不需要有终端指令（也不需要您自己编译它。您所需要的只是优先级>0（例如1），因此您的指令在
select
指令之前编译。（可以找到一个更复杂的示例，它还为
ngModel
指定了一个默认值。）@ExpertSystem，我不明白你的小提琴为什么不能与Angular 1.4.x及以上版本配合使用？现在编译顺序是否有差异？你有没有可能提供一个能与最新Angular配合使用的小提琴？@c05mic:（Un）幸运的是，
ngOptions
进行了一次重大的重构，在1.4.x中，它是一个自己的指令。因此，您确实需要一个终端指令并手动编译（或多或少如本答案所示）。这是一个（稍微改进的）。@ExpertSystem非常感谢这一点。这对我来说非常有效。