Jquery ui 使用JQuery UI插件Selectize时如何保留角度模型和观察

普朗克：

我正在修改一个工作的web应用程序，以利用名为Selectize的jQuery UI插件。以前，我将一个输入元素绑定到控制器，并在该变量上放置了一个手表。我添加了所需的代码来选择已撤消监视和绑定的组件，因为该插件修改DOM元素并用新元素遮挡绑定的元素

我更喜欢使用angular watch，而不是在selectize中调用方法来观察值

注释掉第7-16行，查看每次输入更改时是否正确调用了手表

<input id="itemQuery" type="text" placeholder="Search" class="form-control" ng-model="myValue">

---

您可以做的第一件事是避免在控制器内部进行隐式DOM操作，并为此编写一个指令

并将其应用于您的输入

<input sample-selectivize id="itemQuery" />

如果您已经查看了文档，则会有不同的事件对您有所帮助

---

您可以做的第一件事是避免控制器内部的隐式DOM操作，并为此编写一个指令

并将其应用于您的输入

<input sample-selectivize id="itemQuery" />

如果您已经查看了文档，则会有不同的事件对您有所帮助

---

感谢CodefFormer为我指明了正确的方向。解决方案是告诉angular需要更新范围，并为其提供此组件的新值。关键部分是我需要在指令初始值设定项中包含

require:“？ngModel”

，然后将其作为链接函数的第四个参数提供

angular.module('Sample.controllers', [])
        .controller('mainController', ['$scope',
          function($scope) {
            $scope.myValue = "";
            $scope.$watch('myValue', function(newValue, oldValue) {
              console.log("OldValue: " + oldValue + " New value: " + newValue);
            });
          }]).directive('sampleSelectivize', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.selectize({
        delimiter: ',',
        persist: false,
        create: function(input) {
          return {
            value: input,
            text: input
          }
        }
      }).on('change', function(event) {
        scope.$apply(applyChange);
      });
      function applyChange() {
        ngModel.$setViewValue(element.context.value);
      }
    }
  };
});
angular.module('Sample', ['Sample.controllers']); 

我发现此资源虽然不完整，但很有帮助：

溶液冲击

---

注意：它使用console.log而不是alert。

感谢codef0rmer为我指明了正确的方向。解决方案是告诉angular需要更新范围，并为其提供此组件的新值。关键部分是我需要在指令初始值设定项中包含

require:“？ngModel”

，然后将其作为链接函数的第四个参数提供

angular.module('Sample.controllers', [])
        .controller('mainController', ['$scope',
          function($scope) {
            $scope.myValue = "";
            $scope.$watch('myValue', function(newValue, oldValue) {
              console.log("OldValue: " + oldValue + " New value: " + newValue);
            });
          }]).directive('sampleSelectivize', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, element, attrs, ngModel) {
      element.selectize({
        delimiter: ',',
        persist: false,
        create: function(input) {
          return {
            value: input,
            text: input
          }
        }
      }).on('change', function(event) {
        scope.$apply(applyChange);
      });
      function applyChange() {
        ngModel.$setViewValue(element.context.value);
      }
    }
  };
});
angular.module('Sample', ['Sample.controllers']); 

我发现此资源虽然不完整，但很有帮助：

溶液冲击

---

注意：它使用console.log而不是alert。

我更接近于理解这一点。我也意识到，我需要坐下来揭开这个谜团。我还有最后一段我还不明白。在我向作用域中的绑定变量添加了一个watch之后，它仍然没有更新。我在这里更新了你的装备。由于selectize不使用您的输入框，您的手表将无法工作。您可以查看

onType

callback并查看上面更新的演示。这正是我在实际项目中所做的。我正在调用作用域。$apply在onType中，但传入元素值+onType传递的str。我更接近于理解这一点。我也意识到，我需要坐下来揭开这个谜团。我还有最后一段我还不明白。在我向作用域中的绑定变量添加了一个watch之后，它仍然没有更新。我在这里更新了你的装备。由于selectize不使用您的输入框，您的手表将无法工作。您可以查看

onType

callback并查看上面更新的演示。这正是我在实际项目中所做的。我正在调用scope.$apply in onType，但传入元素值+onType传递的str。下面是一个使用数组的示例，允许您指定要自动完成的对象列表。下面是一个使用数组的示例，它允许您指定要自动完成的对象列表。