Chosen.js плохо работает с угловой директивой

Question

Я создал код плунжера для этого вопроса здесь 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>

Как вы можете видеть, я создал директиву и назвал ее "selected", вот код:

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
}
});

Пожалуйста, обратите внимание, что я использую более старую версию selected, в которой требуется liszt: updated вместо selected: updated

Я знаю, что состояния заполняются, так как, когда я проверяю код, я вижу их в исходном SELECT. Есть идеи?

Answer 1

Вы должны установить $watch в директиве на имя переменной в области, которую вы хотите отслеживать. То, что происходило, было то, что часы запускали "триггер" до того, как в списке были элементы.

Я положил несколько логов, чтобы вы могли проверить

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

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