0

我有一个服务器端模板（ZPT），其中我将一个选择框填充为：

<select id="state">
  <option value="">----</option>
  <option tal:repeat="state states" tal:attributes="value state/code" tal:content="state/desc"></option>
</select>

我想使用 angularjs 向选择框添加一些动态的东西，我正在编写一个 angular 指令，它可以在选择框上初始化模型。以前我使用 $scope.state = document.getElementById('state').value 设置我的 ng-model 的初始值，但有人建议我应该在指令中而不是在控制器中完成 DOM 操作。

所以现在我正在尝试编写这个指令，该指令对于模板呈现的所有 HTML 标记都是通用的，并为选择标记添加特殊情况。

.directive('initModelFromServer', function() {
return {
   restrict: 'A',
   require: 'ngModel',
   link : function(scope, elm, attr, ngModelCtrl) {
       if (attr.type === 'text'){
           ngModelCtrl.$setViewValue(elm.val());
       }
       var tagName = elm[0].nodeName;
       if (tagName === 'SELECT'){
           ngModelCtrl.$setViewValue(elm[0].children(elm[0].selectedIndex));
       }
   }
};

然后将指令应用于我的标签：

<select id="state" ng-model="state" init-model-from-server>
  <option value="">----</option>
  <option tal:repeat="state states" tal:attributes="value state/code" tal:content="state/desc"></option>
</select>

问题是当我找到选择标记时执行 elm[0].selectedIndex 时，它始终设置为 0。我尝试了其他方法，通过查找 select 的子项并在选项上查找 selected 属性但无法实现相同的功能。

我不想从我的服务器端模板发送一个 json 对象并将其分配给角度变量，因为这样将有更多数据传递给客户端。我宁愿想要一个指令，它可以直接使用链接方法中的 DOM 操作来初始化模型，以用于服务器呈现的所有类型的 HTML 标记。

提前致谢！

4

0 回答 0