Выполнить плагин Jquery после AngularJS было вынесено

Я получаю коллекцию объектов с помощью Ajax:Выполнить плагин Jquery после AngularJS было вынесено

// Var available in the template 
this.list = []; 

// This function refresh the list 
var self = this; 
this.refreshList = function() { 
    ChannelService.get({}, function (result) { 
    self.list = result.objects; 
    }); 
}; 

// Initial refresh of the list 
this.refreshList();

Эта коллекция используется для заполнения выбора:

<option ng-repeat="channel in ChanListCtrl.list" value="channel.id"> 
    {{ channel.description }} 
</option>

Проблема: После оказания view, я хотел бы использовать плагин jQuery под названием «Multiselect» для улучшения внешнего вида & ощущения моего выбора.

Плагин используется так:

element.multiSelect()

Я попытался это решение: AngularJS and jQuery plugin after render

Этот виджет отображается правильно, но AngularJS не заменяет переменные ({{channel.description}})

Я попытался передать событие, когда Ajax сделан, но он не работает ... Я также попытался вызвать функцию обновления с помощью ng-init на свой тег html, но безуспешно.

Вот plunker для иллюстрации: http://plnkr.co/edit/EMOjy1TbSkQvCjbxZlFX?p=preview

источник

2014-12-02 Thomas K

Я думаю, что после вызова JQuery плагин, вам нужно сообщить угловую сделать это снова работа. Для этого вам нужно $ compile service, $ compile (element) ($ scope), см. Документы для получения дополнительной информации: https://docs.angularjs.org/api/ng/service/$compile – Rasalom

Кроме того, я предлагаю вам использовать директива по улучшению внешнего вида ваших ящиков выбора. Это сэкономит вам массу неприятностей: http://isteven.github.io/angular-multi-select/ – jValdron

@jValdron Я уже видел эту директиву, но она не использует ng-model, и внешний вид не тот, м ищет. Расалом: Не могли бы вы быть более ясными? Я не вижу, как использовать компиляцию $ для решения моей проблемы. Большое спасибо –

Лично я бы наблюдать переменную list для каких-либо изменений, и при обнаружении изменения, я бы вызвать refresh метод из MultiSelect плагина.

В контроллере:

// Initialize the multiselect before anything else. 
$('#channels').multiSelect(); 

// Add a watch on the list. Notice this uses the $timeout 
// service, so you'll have to add that to your controller. 
$scope.$watch('list', function(){ 
    $timeout(function(){ 
    $('#channels').multiSelect('refresh'); 
    }); 
});

Полный Plunker: http://plnkr.co/edit/FRpy2aEZUu9csUoKJYZO

источник

2014-12-02 15:28:12 jValdron

Thx, он работает даже с реальным вызовом Ajax. Но я хотел бы поставить часы в другом контроллере. Является ли это возможным ? Пример: http://plnkr.co/edit/nWz3NWhsRoiReXtL0ZnB?p=preview –

Из вашего Plunker можно делать то, что вы делаете, и это сработает, но я не думаю, что это «Угловой способ», ;) – jValdron

Любые улучшения, предлагаемые? Спасибо за помощь. –

Выполнить плагин Jquery после AngularJS было вынесено

ответ

Смежные вопросы