如何留住角模型，并观看使用JQuery UI插件Selectize时 [英] How to retain Angular model and watch when using JQuery UI plugin Selectize

问题描述

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

我修改工作web应用程序使用一个名为Selectize jQuery UI的插件。 previously我不得不绑定到控制器和放置在该变量的手表的输入元件。我添加了必需的code到selectize已撤消我的手表和有约束力的，因为这个插件修改DOM元素和掩盖了我的绑定元素与新元素的组件。

我想preFER留在角手表，而不是调用一个方法selectize观赏价值。

注释掉线7​​-16看手表正确调用每个输入变化。

 ＆LT;输入ID =itemQuery类型=文本占位符=搜索级=表格控NG模型=myvalue的＆GT;
 

和脚本：

  angular.module（'Sample.controllers'，[]）
    .controller（'mainController'，['$范围'，
        功能（$范围）{
            $ scope.myValue =;
            $（'＃itemQuery'）。selectize（{
                分隔符：'，'，
                坚持：假的，
                创建：功能（输入）{
                    返回{
                        值：输入，
                        文本：输入
                    }
                }
            }）;            $范围。$腕表（'myvalue的'功能（为newValue，属性oldValue）{
               警报（旧值：+属性oldValue +新值：+为newValue）;
            }）;
}]）;
angular.module（'样品'，['Sample.controllers']）;
 

解决方案

你可以做的第一件事情就是避免内部控制隐性DOM操作和写入的指令来代替。

<大骨节病> 更新演示

  App.directive（'sampleSelectivize'，函数（）{
  返回{
    限制：'A'，
    链接：功能（范围，元素，ATTRS）{
      element.selectize（{
          分隔符：'，'，
          坚持：假的，
          创建：功能（输入）{
            返回{
              值：输入，
              文本：输入
            }
          }
      }）。在（'变化'，函数（事件）{
        的console.log（$（本）.VAL（））;
      }）;
    }
  };
}）
 

和它应用到你输入

 ＆LT;输入采样selectivize ID =itemQuery/＆GT;
 

如果您检查过的文档，有不同的事件可以对你有所帮助
https://github.com/brianreavis/selectize.js/blob /master/docs/events.md

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

I am modifying a working web app to utilize a jQuery UI plugin called Selectize. Previously I had an input element bound to the controller and a watch placed on that variable. I added the required code to selectize the component which has undone my watch and binding because this plugin modifies the DOM elements and obscures my bound element with new elements.

I would prefer to stay with the angular watch rather than calling a method in selectize to watch the value.

Comment out lines 7-16 to see that the watch is called correctly on every input change.

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

And the script:

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

解决方案

First thing you can do is avoid implicit DOM manipulation inside controller and write a directive for that instead.

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

And apply it to your input

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

If you've checked the documentation, there are different events can be helpful for you https://github.com/brianreavis/selectize.js/blob/master/docs/events.md

这篇关于如何留住角模型，并观看使用JQuery UI插件Selectize时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！