модель angularjs не обновляется при выборе смены

Question

Я пытаюсь интегрировать выбранные плагины angularjs и jquery, все работает отлично, но когда они меняются, модель не обновляется. Может кто-нибудь расскажет мне, как это сделать. Есть видео на YouTube, который объясняет то же самое, но я не имею доступа к YouTube, любая помощь будет высоко оценен

Это мой HTML-код:

<select id="categories" data-placeholder="Select Categories" 
    chosen="categories" ng-model="categoriesSelected" multiple="" 
    ng-options="category.name for category in categories"></select> 
<div ng-repeat="category in categoriesSelected">{{category.name}}</div> 

Это угловой код:

app.directive('chosen', function() 
{ 
    return { 
     restrict : 'A', 
     link : function(scope, element, attr) 
     { 
      console.log(attr); 

      $("#" + attr.id).chosen(); 

      scope.$watch(attr.chosen, function(oldVal, newVal) 
      { 
       $("#" + attr.id).trigger('chosen:updated'); 
      }); 

      scope.$watch(attr.ngModel, function() 
      { 
       $("#" + attr.id).trigger('chosen:updated'); 
      }); 

     } 
    }; 
}) 

app.controller("workbenchController", function($scope, $http, workbenchService) 
{ 
    $scope.categories = []; 
    $scope.categoriesSelected = []; 
    workbenchService.categoriesList().then(function(data) 
    { 
     $scope.categories = data; 
    }) 
} 

Answer 1

Причина может заключаться в том, что плагины jQuery способствуют модификации DOM после того, как угловое приложение было скомпилировано, что означает, что угловое приложение не сможет использовать элемент как часть приложения (никакая ng-модель, ng-show и т. Д. Для этот элемент), поэтому вы не должны пытаться использовать jquery-плагины, но угловые директивы таким образом, что директива будет компилироваться вместе с приложением, и вы получите все, как ожидалось.

Лучше Подход для вашей проблемы будет использовать ui-select директивы, которая является угловым родным выберите поле, которое работает так же, как selectize, избранный или Выбор2, больше информации и скачать Here

и рабочего plunker пример Here

Answer 2

проблема заключается в контроллере:

app.controller("workbenchController", function($scope, $http, workbenchService) 
{ 
    $scope.data = {}; 
    $scope.data.categories = []; 
    $scope.data.categoriesSelected = []; 

    workbenchService.data.categoriesList().then(function(data) 
    { 
     $scope.data.categories = data; 
    }) 
} 

Таким образом, вы Html должны указать:

<select id="categories" data-placeholder="Select Categories" 
    chosen="categories" ng-model="data.categoriesSelected" multiple="" 
    ng-options="category.name for category in categories"></select> 
<div ng-repeat="category in data.categoriesSelected">{{category.name}}</div> 

читать это, пожалуйста: Understanding scopes