AngularJS 1.2.12中ngRepeat内select2.js无法正常渲染问题求助

嘿，我帮很多人排查过AngularJS 1.x和Select2搭配的问题，你这个情况大概率是几个常见的坑没踩对，咱们一步步来解决：

Select2依赖jQuery，而AngularJS如果在jQuery之前加载，会默认使用自己内置的jqLite，这会导致Select2没法正确绑定到DOM元素上。你现在的加载顺序是Angular在前、jQuery在后，这完全搞反了！修正后的顺序必须是：

<!-- 先加载jQuery -->
<script src="static/js/jquery.min.js"></script>
<!-- 再加载AngularJS -->
<script src="static/js/angular.min.js"></script>
<!-- 然后是其他依赖 -->
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/star-rating.min.js"></script>
<!-- 最后加载Select2的JS -->
<script src="你的select2.js文件路径"></script>

就算JS正常工作，没加载Select2的CSS，它看起来也和普通文本框没区别。记得在页面头部加上：

<link rel="stylesheet" href="你的select2.css文件路径">

AngularJS的数据流和jQuery插件的DOM操作很容易冲突，最好用自定义指令来封装Select2，这样能保证和Angular的ngModel双向绑定正常工作。给你一个现成的指令示例，直接用到你的项目里：

// 替换成你自己的Angular模块名
angular.module('yourAppModule')
.directive('select2', function() {
  return {
    restrict: 'A', // 作为属性使用
    require: 'ngModel', // 依赖ngModel指令
    link: function(scope, element, attrs, ngModel) {
      // 初始化Select2，可根据需求加配置项
      element.select2({
        placeholder: attrs.placeholder || '请选择国家',
        allowClear: true // 可选，允许清空选中值
      });

      // 把Select2的选中值同步到Angular模型
      element.on('change', function() {
        scope.$apply(function() {
          ngModel.$setViewValue(element.val());
        });
      });

      // 把Angular模型的变化同步到Select2
      scope.$watch(function() {
        return ngModel.$modelValue;
      }, function(newVal) {
        element.val(newVal).trigger('change');
      });

      // 页面销毁时清理Select2实例，避免内存泄漏
      scope.$on('$destroy', function() {
        element.select2('destroy');
      });
    }
  };
});

假设你的用户国家数据存在userCountries数组里，选中值绑定到selectedCountry（单选）或者selectedCountries（多选），HTML代码应该这么写：

<!-- 单选示例 -->
<select class="form-control"
        select2
        ng-model="selectedCountry"
        ng-options="country.id as country.name for country in userCountries">
</select>

<!-- 多选示例 -->
<select multiple class="form-control"
        select2
        ng-model="selectedCountries"
        ng-options="country.id as country.name for country in userCountries">
</select>

如果你的国家数据是通过API异步加载的，要确保在数据加载完成后再初始化Select2。可以在指令里加个监听：

// 在指令的link函数里添加
scope.$watch('userCountries', function(newVal) {
  if (newVal && newVal.length > 0) {
    // 先销毁旧实例，再重新初始化
    element.select2('destroy').select2();
  }
});

按照上面的步骤来，基本就能解决Select2只渲染成普通文本框的问题啦！

内容的提问来源于stack exchange，提问作者Mr code.