Question

我正面临着一个我对AngularJS无法理解的问题。

我有一个相当简单的选择，在我的两个指令中表现不同。在我的第一个带有templateURL的指令中，它默认选择第一个选项，而不是第二个选项：

.directive("inputFieldSelectTpl", function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
    },
    "templateUrl": "inputFieldSelect.tpl.html",
    "link": function(scope, elem, attrs) {
      scope.opta = attrs.opta;
      scope.optb = attrs.optb;
    }
  };
});

.directive("inputFieldSelect", function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
    },
    template: function(elem, attrs) {
      var template =
      '<select ng-model="ngModel">'+
      '<option value='+attrs.opta+'>'+attrs.opta+'</option>'+
      '<option value='+attrs.optb+'>'+attrs.optb+'</option>'+
      '</select>';
      return template;
    }
  };
});

使用inputFieldSelect.tpl.html：

<select ng-model="ngModel">
  <option value={{opta}}>{{opta}}</option>
  <option value={{optb}}>{{optb}}</option>
</select>

我无法弄明白为什么。我已经读过我可以在templateURL中添加一个空选项标签以避免这种自动选择，但是它添加了一个空选项，我希望避免使用强制表单字段。它是正常还是angularJS错误？

（我不介意我的模型没有选择默认值，因为我可以在以后强制执行此操作。）

这是一个完整而简单的Punker：http://plnkr.co/edit/tz5s6vjI83VyTKGycTzg

由于

Answer 1

如果在指令中附加控制器，则可以在指令中初始化变量。我修改了Plunker：

http://plnkr.co/edit/bQwkV83jhPPsiqTs4nsK?p=preview

改变：

  controller: function($scope) {
    $scope.ngModel="Monetary"
  }

希望这对你正在做的事情有用吗？

Answer 2

实际上我设法使用预链接而不是链接使其工作：

http://plnkr.co/edit/zhcDBwJbzJ9Ilr0qfrLp?p=preview

  "link": {
    pre: function(scope, elem, attrs) {
      scope.opta = attrs.opta;
      scope.optb = attrs.optb;
    }
  }

我想说这个函数必须在angularJS select指令之前执行，否则它的选项有些未知，因此这个未定义的行为选择了第一个值。

在使用带有AngularJS的templateURL时，默认情况下在select标记中选择第一个选项

2 个答案: