0

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

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

我宁愿继续使用角度手表，而不是调用 selectize 中的方法来观察值。

注释掉第 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']);
4

2 回答 2

4

您可以做的第一件事是避免在控制器内部进行隐式 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

于 2013-09-25T13:56:01.803 回答
1

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

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 而不是警报。

于 2013-09-25T20:31:01.240 回答