Question

Plunker：http://plnkr.co/edit/ElXFi2mo44VpLVsaooOJ

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

我更愿意使用角度表，而不是在选择方法中调用方法来观察价值。

注释第7-16行，看看每次输入更改都会正确调用手表。

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

脚本：

angular.module('Sample.controllers', [])
    .controller('mainController', ['$scope', 
        function($scope) {
            $scope.myValue="";
            $('#itemQuery').selectize({
                delimiter: ',',
                persist: false,
                create: function(input) {
                    return {
                        value: input,
                        text: input
                    }
                }
            });

            $scope.$watch('myValue', function(newValue, oldValue) {
               alert("Old value: " + oldValue + " New value: " + newValue);
            });
}]);
angular.module('Sample', ['Sample.controllers']);

Answer 1

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

Updated Demo

App.directive('sampleSelectivize', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.selectize({
          delimiter: ',',
          persist: false,
          create: function(input) {
            return {
              value: input,
              text: input
            }
          }
      }).on('change', function(event) {
        console.log($(this).val());
      });
    }
  };
})

并将其应用于您的输入

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

如果您已经查看了文档，则有不同的事件对您有所帮助 https://github.com/brianreavis/selectize.js/blob/master/docs/events.md

Answer 2

感谢codef0rmer将我指向了正确的方向。解决方案是告诉角度范围需要更新并为其提供此组件的新值。关键部分是我需要在我的指令初始化器中包含require: '?ngModel'然后将其作为链接函数的第4个参数提供。

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']);

我发现此资源虽然不完整但仍然有用：http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController

解决方案plunk http://plnkr.co/edit/ieqQRWBub8ZJ8zOdEhEs?p=preview 注意：它使用console.log而不是alert。

如何保留Angular模型并在使用JQuery UI插件时观看Selectize

2 个答案: