当使用带有 AngularJS 的 templateURL 时，第一个选项 select 默认在 select 标签中编辑

Question

我遇到了一个我无法完全理解的问题AngularJS。

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

.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 中添加一个空选项标签来避免这种自动 select 但它添加了一个空选项，我想避免强制表单字段。这是正常现象还是 angularJS 错误？

（我不介意我的模型没有 select 默认值，因为我稍后可以强制这样做。）

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

谢谢

Answer 1

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

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

变化：

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

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

Answer 2

实际上我设法使用 Prelink 而不是 link:

使其工作

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

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

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

当使用带有 AngularJS 的 templateURL 时，第一个选项 select 默认在 select 标签中编辑

First option selected by default in select tag when using templateURL with AngularJS

angularjs

html-select