Chosen.js 不适用于 Angular 指令

Question

我在这里为这个问题创建了一个 plunker 代码 http://plnkr.co/edit/mTaRPoAsQQQ6OSEQLS3a?p=preview

这是列表的 HTML 代码

<select ng-model="modSelectedState" id="inputLocation-" name="filter_location"    
     class="location" ng-options="state as state.full_name for state in states" 
     chosen="states">
<option value="">State</option>

如你所见，我创建了一个指令并将其命名为“选择”，代码如下：

app.directive('chosen', function ($http) {
var linker = function (scope, element, attr) {
    scope.$watch(scope.states, function (oldVal, newVal) {
        element.trigger('liszt:updated');
    });
    scope.$watch(attr.ngModel, function () {
        element.trigger('liszt:updated');
    });
    element.chosen({disable_search_threshold: 20});
};

return {
    restrict: 'A',
    link: linker
}
});

请注意，我使用的是旧版本的 'chosen'，它需要 'liszt:updated' 而不是 'chosen:updated'

我知道状态正在被填充，因为当我检查代码时，我可以在原始 SELECT 中看到它们。有什么想法吗？

Answer 1

您必须将指令上的 $watch 设置为您需要监视的范围内的变量名称。发生的事情是手表在列表有元素之前运行“触发器”。

我放了一些 $logs 以便你查看

http://plnkr.co/edit/mR8WhwvJiDZMG7Nlursg?p=preview

scope.$watch('states', function (newVal, oldVal) {
    element.trigger('liszt:updated');
    $log.info('trigger');            
});