javascript - AngularJS 渲染后执行 Jquery 插件

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>

问题:渲染 View 后，我想使用一个名为“Multiselect”的 jQuery 插件来改善我的选择的外观和感觉。

该插件的使用方式如下:

element.multiSelect()

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

此小部件已正确显示，但 AngularJS 未替换变量 ({{channel.description }})

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

这里有一个 plunker 来说明:http://plnkr.co/edit/EMOjy1TbSkQvCjbxZlFX?p=preview

Answer 1

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

在你的 Controller 中:

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