Question

我通过Ajax收到一个对象集合：

// 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>

问题：在渲染视图之后，我想使用名为＆＃34; Multiselect＆＃34;的jQuery插件。改善我的选择的外观和感觉。

插件的使用方式如下：

element.multiSelect()

我尝试了这个解决方案：AngularJS and jQuery plugin after render

此窗口小部件已正确显示，但AngularJS未替换变量（{{channel.description}}）

我尝试在Ajax完成时播放一个事件，但它没有工作......我也尝试在我的html标签上使用ng-init调用更新函数但没有成功。

这是一个说明：http://plnkr.co/edit/EMOjy1TbSkQvCjbxZlFX?p=preview

的插图

Answer 1

就个人而言，我会在list变量中查看任何更改，当检测到更改时，我会从多选插件调用refresh方法。

在您的控制器中：

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

Full Plunker：http://plnkr.co/edit/FRpy2aEZUu9csUoKJYZO

在渲染AngularJS之后执行Jquery插件

1 个答案: