选择的Angular指令不会更新

时间:2013-08-15 21:46:45

标签: javascript angularjs angularjs-directive jquery-chosen

我已经按照这个伟大的教程(link)选择了Chosen和Angular(代码非常相似)

这是我的指示:

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>

我想要的是,当用户点击编辑按钮时,弹出模态窗口,并在模态窗口中选择在单击编辑按钮之前选择的类别。

以下是控制器的一部分:

  $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 并且一切都很好,但由于某种原因,没有选择任何内容。

那么我做错了什么以及如何解决?

修改

我注意到当我选择一些项目时,关闭模态,再次打开它,选择的值再次出现在前夕虽然我把这条线放在$ watch

$scope.selectedCategories = "";

编辑2

所以我暂时搁置了这个问题,因为我有更重要的事情需要处理。 我试过没有选择,即使用“正常”选择和代码工作。因此,我所选择的指令最终无法正常运作。

2 个答案:

答案 0 :(得分:11)

我已经解决了,实际上解决方案非常简单明了(当你了解Angular指令的工作原理时)。这是指令的完整代码:

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

答案 1 :(得分:1)

以前解决方案的评论的更多扩展版本。 与作者相同,在HTML标记中我提供了像chosen="vm.myCollection"这样的源集合,实际使用regexp解析ng-optionsng-repeat属性更好,可能更晚。 与OP相反,我使用$ watchCollection作为数组,并在范围即将销毁时调用unwatches。

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