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