选择的 Angular 指令未更新 [英] Chosen Angular directive doesn't get updated

问题描述

我已经按照这个很棒的教程(link)学习了 Chosen 和 Angular (代码几乎相同)

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

这是我的指令:

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

这是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.

这是控制器的那部分:

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

我已经记录了 $scope.selectedCategories 并且一切都很好，但是由于某种原因，selected 中没有任何选择.

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 ?

编辑

我注意到当我选择一些项目时，关闭模式，再次打开它，虽然我把这一行放在 $watch 中，但选定的值仍然存在

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 = "";

编辑 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.

推荐答案

我已经解决了，解决方案实际上非常简单直接(当您了解 Angular 指令的工作方式时).这是指令的完整代码:

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

这篇关于选择的 Angular 指令未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！