在AngularJS中调用jQuery插件函数

Question

I am use jQuery plugin select2 and want call select2 function in AngularJS. I know that can use angular-ui/ui-select , but page design require jQuery plugin select2.

I want to change the value in the model Angular and change the value of the select2.

I create Angular directive and I want to call select2 function, but do not know how to implement it correctly:

angular.module("myModule").directive("select2Value", [
  function() {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        scope.$watch(function() {
          element.select2().val(ngModel.$modelValue).change();
        });
      }
    };
  }
]);

I have this error:

Error: [$rootScope:inprog] $digest already in progress

For fix this error I am use this solution: https://stackoverflow.com/a/36219812/6746305 :

angular.module("myModule").directive("select2Value", [
  "$timeout", function($timeout) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        var timeout;
        changeValue(function() {
          element.select2().val(ngModel.$modelValue).change();
        });
        timeout = void 0;
        scope.$watch(function() {}, function(newVal, oldVal) {
          if (timeout) {
            $timeout.cancel(timeout);
          }
          timeout = $timeout(changeValue, 1000);
        });
      }
    };
  }
]);

But this not work: I am change value in Model Angular, but this value not change in select2.

Answer 1

I am find solution for change value in jQuery:

angular.module("myModule").directive("select2Value", [
  "$timeout", function($timeout) {
    return {
      restrict: 'A',
      priority: 0,
      link: function(scope, element, attr, ngModel) {
        return scope.$watch(attr.ngModel, function(value) {
          return $timeout(function() {
            return element.val(value).change();
          });
        });
      }
    };
  }
]);

Solution find here (thank you this blog): http://blog.virtualzone.de/2015/08/angularjs-watching-for-changes-in-ng-model-and-determine-linked-dom-element.html