angular1+chosen 远程获取值渲染select options bug

之前一直是写react 的，换了新公司有一个贼老的项目用 angular1 写的，之前也没写过angular,就是随便看了看，小白一个，所以下面有好多东西只是表皮。写需求的时候发现一个坑，可能这年头也没有人用这么老的框架了，我就记一下。

 

问题描述：

项目使用angular1.3.2,select 使用了chosen插件。

select  options 需要远程获取数据，但是获取数据之后发现 model 的数据发生变化了，也能打印，也能watch ,但是页面不渲染。

 

解决方案：

获取到数据之后设置完 $scope 上面的值之后，使用

angular.element("#dsList").trigger("chosen:updated");

强制更新 <select>

html代码如下：

<select id='dsList' ui-jq="chosen" class="w-md" ng-model="dataSource">
  <option ng-repeat="item in dataSources" value="{{item.id}}">{{item.name}}</option>
</select>

但是还有一个小点需要注意，我在设置完 $scope 之后直接用上面的代码更新之后发现没有生效，然后在控制台输入这一行代码，发现select 渲染成功了。所以又在外面套了一层$timeout，然后就OK了，最终的代码是：

/**
 * 解决下拉框控件双向绑定失败问题
 */
function forceRefreshSelect() {
  $timeout(function () {
    angular.element("#dsList").trigger("chosen:updated");
  }, 0, false);
}

 

相关原理：

参考链接1，哈哈哈，好像是涉及到angular上下文的问题，也不是太懂，貌似是setTimeout,ajax 请求这种就不在当前angular 上下文？不是很了解

 

参考链接：

1、https://my.oschina.net/u/2391658/blog/1936403