javascript - HTML 选择字段渲染需要时间

Question

我目前正在开发一个 angularJS 应用程序。我有一个包含大约 40 个控件的 HTML 表单。除选择字段外，所有其他控件都呈现良好。我的页面上大约有 16 个选择字段，这个选择字段是一个 angular 指令。当我说选择字段未正确呈现时，我的意思是它会加载，但它首先会拉伸(stretch)到更大的尺寸，然后达到 CSS 中指定的尺寸。因此渲染不流畅。为什么我的选择字段被拉伸(stretch)然后变成正常大小的任何特殊原因？我在这里先向您的帮助表示感谢。

Answer 1

我明白为什么会发生这种情况的可能原因是浏览器在完成加载您的 css 文件或 angularjs 文件之前加载了您的选择元素。请尝试在指令模板上使用内联 css 声明选择字段的宽度。

<select style="width:100px"><option>Option 1</option></select>

您可以尝试的另一种解决方案是在指令声明中使用“elem”参数。

app.directive('test', function() {
  return {
    restrict: 'AE',
    replace: true,
    templateUrl: '<select><option>Option 1</option></select>',
    link: function(scope, elem, attrs) {          
      elem.css('width', '100px');
    }
  };
});

希望对您有所帮助! :)