3

私はangularに非常に慣れていないので、理解不足を許してください。

「ドラッグ可能」と呼ばれるディレクティブがあり、コントローラーで x 位置を追跡してロジックを実行できるようにしたいと考えています。ユーザーが要素 (棒人間) を右にドラッグすると、追加の棒人間がそのすぐ後ろに表示されます。コントローラーは x 位置を認識し、その位置に基づいて、ドラッグ可能な要素の背後に表示される棒線画の数を決定するカウンターをインクリメントする必要があります。

コントローラーが x の値を受信して​​いないため、このコードは現在機能しません。

私の指示:

app.directive('draggable', function() {
    return {
        restrict: 'A',
        scope: "=x",
        link: function (scope, element, attrs) {
            $(element).draggable({
                containment: "parent",
                axis: "x",
                drag: function(){
                    scope.x = $(this).offset().left;
                }
            });
        }
    };
});

私のコントローラー：

app.controller("main-controller", function($scope) {
    $scope.range = function(n) {
        return new Array(figures);  
    };
    $scope.$watch("x", function(){
        console.log($scope.x);
        figures = x / (stick_figure_height)
    });
});

私のHTML：

<div class="human-slider" ng-controller="main-controller">
    <div draggable class="human-draggable">
        <img src="images/stickfigure.png"/>
    </div>
    <div ng-repeat="i in range()">
        <img src="images/stickfigure.png"/>
    </div>
</div>
4

3 に答える 3

6

コントローラーがドラッグ可能なディレクティブから x の更新された値を取得しなかった理由は、x の値が更新されている場所が原因でした。X は、angularJS ライブラリ (ドラッグ イベント ハンドラー) の外部のメソッドで作成された順番で更新されます。この問題の解決策は、バインドを更新する $.apply を使用することでした。

更新されたコード:

// Create our angular app
var app = angular.module('celgeneApp',[]);


// Main controller 
app.controller("main-controller", function($scope) {
    $scope.x = 0;
    $scope.figures = 0;
    $scope.range = function(n) {
        return new Array($scope.figures);  
    };
    $scope.$watch('x', function(){console.log($scope.x);});
});

// Draggable directive
app.directive('draggable', function() {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope, element, attrs) {
            $(element).draggable({
                containment: "parent",
                axis: "x",
                drag: function(){
                    // Need to use $apply since scope.x is updated 
                    // in a turn outside a method in the AngularJS library.
                    scope.$apply(function(){scope.x = element.offset().left;});
                }
            });
        }
    };
});
于 2013-10-17T19:02:27.683 に答える
5

サービスを介して、ディレクティブとコントローラーの間で通信できます。ディレクティブは、パラメーターを介してコントローラーのスコープ変数にアクセスすることもできます。必要に応じて、さまざまな方法で変数にアクセスできます。

  • @プレフィックスが付いた単なるテキストとして
  • & プレフィックスを使用した片方向バインディング
  • = 接頭辞付きの 2 ベイ バインディングの場合

ディレクティブ、特にスコープセクションに関するこの優れた記事をチェックしてください

私が作成したこのディレクティブを見てください。これは、あなたのものと同じように jQuery のドラッグ可能なラッパーにすぎません。おそらくいくつかのアイデアを得ることができます。

角度ドラッグ可能

于 2013-10-17T16:24:50.470 に答える