8

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

対処すべきもっと重要なことがあったので、この問題をしばらく放置しました。私は選択せずに試しました。つまり、「通常の」選択とコードの動作を使用しました。したがって、間違いなく、選択したディレクティブは正常に機能しません。

4

2 に答える 2

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
    };
});
于 2013-09-01T11:45:53.093 に答える
1

以前のソリューションに対するコメントの拡張バージョン。著者と同じように、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();
                });
            }
        };
    }
}());
于 2015-08-21T14:02:46.880 に答える