Selectize & AngularJS не играет вместе с полем выбора (несколько опций)

Я пытаюсь реализовать Selectize с помощью AngularJS (1.2.4). Я использую this directive для взаимодействия с плагином, и все работает плавно до сих пор. При использовании ngModel из нормального блока выбора Он отлично работает и возвращает ожидаемый объект, но когда я пытаюсь использовать его с несколькими атрибутами, он не будет устанавливать модель.Selectize & AngularJS не играет вместе с полем выбора (несколько опций)

Я проверил DOM и, похоже, сценарий удаляет невыбранные параметры из скрытого выбора и может быть возиться с угловым привязкой.

Я создал Plunkr, чтобы продемонстрировать поведение.

http://plnkr.co/It6C2EPFHTMWOifoYEYA

Благодаря

источник

2014-02-19 Daniel Tavares

Вы будете нуждаться гораздо больше, чем однострочник в вашей директиве, чтобы сшить этот плагин JQuery вместе с Угловым. JS. Вам нужно явно обработать событие «change», инициированное Selectize, чтобы оно могло сообщить Angular.JS, что только что произошло. – jokeyrhyme

Когда вы смотрите пример plunker для selectize.js, есть два состояния. 1) «$ scope.options» [не изменяется] 2) selectizeModel [transient]. В вашем случае у вас есть только одно состояние, поэтому эффект его удаления. – karuthan

Это упражнение? Если нет, зачем изобретать колесо? Используйте https://github.com/angular-ui/ui-select –

Как уже упоминалось в предыдущих комментариях, ваша директива должна слушать изменения в selectize плагином, а затем сообщить угловую о том, что произошло через ng-model.

Во-первых, ваша директива должна попросить необязательного ссылку на контроллер ngModel со следующим:

require: '?ngModel'.

Он вводится в вашу функцию связи в качестве аргумента в 4-й позиции:

function(scope,element,attrs,ngModel){}

Затем, вы должны слушать изменения в selectize с $(element).selectize().on('change',callback)

и сообщить ngModel с ngModel.$setViewValue(value)

Вот измененная версия вашей директивы. Это должно заставить вас начать.

angular.module('angular-selectize').directive('selectize', function($timeout) { 
    return { 
     // Restrict it to be an attribute in this case 
     restrict: 'A', 
     // optionally hook-in to ngModel's API 
     require: '?ngModel', 
     // responsible for registering DOM listeners as well as updating the DOM 
     link: function(scope, element, attrs, ngModel) { 
      var $element; 
      $timeout(function() { 
       $element = $(element).selectize(scope.$eval(attrs.selectize)); 
       if(!ngModel){ return; }//below this we interact with ngModel's controller 
       //update ngModel when selectize changes 
       $(element).selectize().on('change',function(){ 
        scope.$apply(function(){ 
         var newValue = $(element).selectize().val(); 
         console.log('change:',newValue);      
         ngModel.$setViewValue(newValue); 
        }); 
       }); 
      }); 
     } 
    }; 
});

также:

источник

2014-06-24 21:23:36

Selectize & AngularJS не играет вместе с полем выбора (несколько опций)

ответ

Смежные вопросы