Chosen Angular directive doesn't get updated

hyperN picture hyperN · Aug 15, 2013 · Viewed 7.2k times · Source

I've followed this great tutorial (link) for Chosen and Angular (code is pretty much same)

Here is my directive:

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

Here is 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>

What I want is, when user clicks edit button, modal window pops up, and categories that where selected before clicking edit button, are selected in modal window.

Here is that part of controller:

  $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've logged $scope.selectedCategories and everything is fine with them, but for some reason there is nothing selected in chosen.

So what am I doing wrong and how can I fix it ?

EDIT

I've noticed when I select some items, close modal, open it again, selected values are there again eve though i put this line inside $watch

$scope.selectedCategories = "";

EDIT 2

So I left this problem for a while, because I had more important things to deal with. I've tried without chosen, i.e. using "normal" select and code works. So Definitively my chosen directive doesn't work as it should.

Answer

hyperN picture hyperN · Sep 1, 2013

I've solved it, the solution is pretty easy and straightforward actually (when you get how Angular directives work). Here is whole code for directive:

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