选择的 Angular 指令没有更新答案

【问题标题】：Chosen Angular directive doesn't get updated选择的 Angular 指令没有更新
【发布时间】：2013-08-15 21:46:44
【问题描述】：

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

这是我的指令：

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

那么我做错了什么，我该如何解决？

编辑

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

$scope.selectedCategories = "";

编辑 2

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

【问题讨论】：

标签： javascript angularjs angularjs-directive jquery-chosen

【解决方案1】：

我已经解决了，解决方案实际上非常简单明了（当您了解 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
    };
});

【讨论】：

这正是我想要的，非常感谢！！
在我看来，这确实应该是所选指令的一部分，强迫图书馆的用户做这样的事情很奇怪。
其实集合上你应该使用scope.$watchCollection(list, func)，还有$watch*返回函数停止观看，应该在$scope销毁时调用：scope.$on('$destroy', function () { unwatchModel(); unwatchSource(); });

【解决方案2】：

对先前解决方案的更多扩展版本的评论。与作者相同，在 HTML 标记中，我提供了 chosen="vm.myCollection" 之类的源集合，实际上用正则表达式解析 ng-options 或 ng-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();
                });
            }
        };
    }
}());

【讨论】：