Question

我使用jQuery插件select2并希望在AngularJS中调用select2函数。我知道可以使用angular-ui/ui-select，但页面设计需要jQuery插件select2。

我想更改模型Angular中的值并更改select2的值。

我创建了Angular指令，我想调用select2函数，但不知道如何正确实现它：

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();
        });
      }
    };
  }
]);

我有这个错误：

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

为了解决此错误，我使用此解决方案：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);
        });
      }
    };
  }
]);

但是这不起作用：我在模型角度中改变了值，但是这个值在select2中没有改变。

Answer 1

我在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();
          });
        });
      }
    };
  }
]);

解决方案在这里找到（感谢您的博客）：http://blog.virtualzone.de/2015/08/angularjs-watching-for-changes-in-ng-model-and-determine-linked-dom-element.html

在AngularJS中调用jQuery插件函数

1 个答案: