1

プランカー

私はデータのテーブルを持っています:

<table class="table table-hover" ng-class="dndElemClass" drag-and-drop>
  ...
</table>

$scope.dndElemClass = 'on-drag-enter'私の目標は、要素のondragenterイベント リスナーに割り当てることによって、テーブルにドロップ シャドウを与えることです。

.on-drag-enter {
    -webkit-box-shadow: -3px 3px 5px 3px #ccc;
    ...
}

ディレクティブは次のonDragEnterとおりです。

directive('dragAndDrop', function() {
    return {
        restrict: 'A',
        controller: function($scope) {
            $scope.dndElemClass = '';
        },
        link: function($scope, elem, attr) {
            $scope.$watch('currentFolder.canUpload', function(newValue, oldValue) {
                if (newValue && Modernizr.draganddrop && window.File) {
                    elem[0].ondragenter = function(evt) {
                        evt.stopPropagation();
                        evt.preventDefault();
                        $scope.$apply(function() {
                            $scope.dndElemClass = 'on-drag-enter';
                        });
                    };
                    elem[0].ondragleave = function(evt) {
                        evt.stopPropagation();
                        evt.preventDefault();
                        $scope.$apply(function() {
                            $scope.dndElemClass = '';
                        });
                    };
                    elem[0].ondrop = function(evt) {
                        ...
                    };
                }
            });
        }
    }
})

およびイベント リスナーで$scope.dndElemClassの値を割り当てたにもかかわらず、 は値を認識せず、ドロップ シャドウが表示されないためクラスを割り当てていないようです。ondragenterondragleave<table>

これまでのところ、上記のコードで空白に割り当てられているディレクティブのコントローラー プロパティにクラスを設定すると値が認識されることをテストしたので、ディレクティブからそれを受け入れることがわかっています。テストとしてコントローラーに設定されたクラスで、ondragenterリスナーをトリガーすると、クラスが削除されます。$scope.$apply()がロギングでの値を適切に割り当てていることも確認しましたscope.dndElemClassが、何らかの理由で、イベント リスナーの に設定する$scope.$apply()と、テーブルのng-class属性が変数の割り当てを認識せず、空であると見なされます。

更新:$apply Josh のコメントに従って、イベント リスナーのコールバックで変数を割り当てる 必要がないように、コードをクリーンアップしました。

directive('dragAndDrop', function() {
    return {
        restrict: 'A',
        controller: function($scope) {
            $scope.dndElemClass = '';
        },
        link: function($scope, elem, attr) {
            $scope.$watch('currentFolder.canUpload', function(newValue, oldValue) {
                if (newValue && Modernizr.draganddrop && window.File) {
                    elem.bind('dragenter', function(evt) {
                        evt.stopPropagation();
                        evt.preventDefault();
                        $scope.dndElemClass = 'on-drag-enter';
                    });
                    elem.bind('dragleave', function(evt) {
                        evt.stopPropagation();
                        evt.preventDefault();
                        $scope.dndElemClass = '';
                    });
                    elem.bind('drop', function(evt) {
                        //...
                    });
                }
            });
        }
    }
})

まだ運がありません。ロギングを使用してコールバックを実行していることを確認できますが、変数の割り当てがテーブルのng-class属性によって認識されることはありません。

更新 2: ngClass に関する AngularJS のドキュメントを 読んだ後、私はさらに混乱しています。私にとっては、現在のコントローラー（または私の場合はディレクティブ）の変数に必要なクラスの名前（配列内の名前）を設定するのと同じくらい簡単だと思いました$scope。次に、どこでもそうするようにその変数の名前を指定します要素のng-class=""属性のelse。しかし、私が読んでいるように、人々が式を使用したり、クラス名を切り替えたりしているため、より複雑なようです。

トグルのアイデアを使用して、プランカーをフォークして、ユーザーがトリガーするか$scope.dndElemClassどうかに基づいて、状況設定をブール値に再作成しました。また、 overまたはの利点を理解していないことがわかったので、適切な測定のために含めました。いずれにせよ、これによってテーブルのクラスが期待どおりに設定されることはありませんでした。dragenterdragleave$scope.$apply()angular.bind().addEventListener.ondragenter = function() {};

4

2 に答える 2

0

クラスをスコープに設定してから使用してくださいclass={{classVariable}}!!! これは私にとってはうまくいきます。

于 2014-12-17T10:14:52.700 に答える