Chosen Angular Richtlinie erhält nicht aktualisiert

Question

Ich habe diese große Tutorial gefolgt (link) für Chosen und Angular (Code ist so ziemlich gleich)

Hier ist meine Richtlinie:

app.angularModule.directive('chosen', function() { 
    var linker = function (scope, element, attrs) { 
     var list = attrs['chosen']; 

     scope.$watch(list, function() { 
      element.trigger('chosen:updated'); 
     }); 

     element.chosen({ width: '350px'}); 
    }; 

    return { 
     restrict: 'A', 
     link: linker 
    }; 
}); 

Hier html:

<select data-placeholder="Choose a Category" multiple class="col-lg-8 chosen-select" chosen="items" 
          ng-options="item._backingStore.Name for item in items" ng-model="selectedCategories" > 
        </select> 

Was ich will, ist, wenn der Benutzer bearbeiten Schaltfläche klickt, Modal Fenster öffnet sich, und Kategorien, die in dem ausgewählten, bevor Sie auf Editierknopfes in modalen Fenster ausgewählt.

ist hier, dass ein Teil des Steuerpults:

$scope.$watch(function() { return adminCrudService.getCategoriesForUpdate(); }, function() { 
       $scope.action = "edit"; 
       $scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate(); 
       if ($scope.categoriesForUpdate.length > null) { 
        $scope.selectedCategories = _.filter($scope.items, function (item) { 
         return _.contains($scope.categoriesForUpdate, item); 
        }); 
       } 
      }); 

I $ scope.selectedCategories angemeldet haben und alles ist mit ihnen in Ordnung, aber aus irgendeinem Grund gibt es nichts in gewählt ausgewählt.

Also, was mache ich falsch und wie kann ich es beheben?

EDIT

ich bemerkt habe, als ich einige Elemente, in der Nähe modal wählen, öffnen Sie es erneut, ausgewählte Werte sind wieder Vorabend obwohl ich diese Zeile in $ setzen beobachten

$scope.selectedCategories = ""; 

EDIT 2

Also habe ich dieses Problem für eine Weile verlassen, weil ich wichtigere Dinge zu tun hatte. Ich habe versucht, ohne gewählt, d. H. Mit "normalen" wählen und Code funktioniert. Definitiv funktioniert meine gewählte Direktive nicht so wie sie sollte.

Answer 1

Ich habe es gelöst, die Lösung ist eigentlich ziemlich einfach und unkompliziert (wenn Sie bekommen, wie Angular Direktiven funktionieren). Hier ist der ganze Code für die Direktive:

app.angularModule.directive('chosen', function() { 
    var linker = function (scope, element, attrs) { 
     var list = attrs['chosen']; 

     scope.$watch(list, function() { 
      element.trigger('chosen:updated'); 
     }); 

     scope.$watch(attrs['ngModel'], function() { 
      element.trigger('chosen:updated'); 
     }); 

     element.chosen({ width: '350px'}); 
    }; 

    return { 
     restrict: 'A', 
     link: linker 
    }; 
}); 

Answer 2

Erweiterte Version des Kommentars zur vorherigen Lösung. Das gleiche wie der Autor, in HTML-Markup stelle ich Quellensammlung wie chosen="vm.myCollection", tatsächlich Parsen ng-options oder ng-repeat Eigenschaft mit Regexp ist besser, vielleicht später. Im Gegensatz zu OP verwende ich $ watchCollection für ein Array und rufe Unwatches auf, wenn der Scope gerade zerstört wird.

(function() { 
    'use strict'; 
    angular.module('common.directives').directive('chosen', enterPressDirective); 

    function enterPressDirective() { 
     return { 
      restrict: 'A', 
      link: function (scope, elm, attrs) { 
       var unwatchModel = scope.$watch(attrs.ngModel, function() { 
        elm.trigger('chosen:updated'); 
       }); 

       var unwatchSource = scope.$watchCollection(attrs.chosen, function() { 
        elm.trigger('chosen:updated'); 
       }); 

       elm.chosen(); 

       scope.$on('$destroy', function() { 
        unwatchModel(); 
        unwatchSource(); 
       }); 
      } 
     }; 
    } 
}());