jquery-ui - AngularJs + JQueryUI waiting for response

Question

I am trying to make some useful directives with jQueryUI widgets for my AngularJS base application.

One of them works on "select" element and am ok with directives but only thing do not understand is this one:

1. When select list is populated from ajax request, how to tell to apply jqueryui widget when data is populated? Suppose it is with $watch but not sure how.

Edit: In example I am trying to implement directive for the multiselect plugin. Please note that I am simulating server reponse but putting everything in timeout.

Here is a code on plunker

Answer 1

您需要 $watching 对项目列表的更改，然后调用refresh多选插件... 这是一个显示解决方案的 plunk

angular.module('myui', [])
    .directive('qnMultiselect', function() {
        return { 
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, elem, attr) {
            //set up the plugin.
            elem.multiselect({ allowClear: false });

            //get the source of the ngOptions
            var parts = attr.ngOptions.split(' ');
            var source = parts[parts.length - 1];

            //watch the options source and refresh the plugin.
            scope.$watch(source, function(value) {
              elem.multiselect('refresh');
            });
          }        
        };
    });