1

私はミニ連絡先リストに取り組んでおり、ドラッグ アンド ドロップ効果を達成しようとしています。現在、DB からデータを取得するコントローラーがあり、このようになっています。

Index.controller('cIndex', function($scope, $http) {
    $scope.init = function() {
        $http.get('php/contacts.php').success(function(data) {
            $scope.jsonContactsList = data;
            $scope.jsonContactsDetail = [];
        });
    };
    $scope.init();

    $scope.listdetail = function(index) {
        alert(index);
    };
});

そして、このコントローラーは画面に連絡先のリストを追加します。リストからアイテムをドラッグしてリストの外にドロップすると、アイテムがリストから消えて、その特定の連絡先に関する詳細な div として表示されるようにしたいと考えています。

現在、2 つのディレクティブがあります。1 つはドラッグ効果を、もう 1 つはドロップ効果を作成します。これらは次のようになります。

Index.directive('contactListDrag', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            var options = scope.$eval(attr.contactListDrag);
            elem.draggable(options);
        }
    };
});

Index.directive('contactListDrop', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            elem.droppable({accept: '.contact-list-item'});
            elem.bind('drop', function(event, ui) {
                var id = parseInt($(ui.draggable).attr('id'), 10);
                $scope.listdetail(id);
            });
        }
    };
});

コントローラー内に listdetail という関数があり、jsonContactsList 内の行を jsonContactsDetail に変更するつもりですが、そのためには、ドロップ可能な contactListDrop ディレクティブ内のコントローラーから listdetail 関数を呼び出す必要があります。

よろしくお願いします、ダニエル！

4

2 に答える 2

2

これに関する修正を見つけました。scope.listdetail(id); を使用する必要がありました。ドル記号なし。

于 2013-08-31T12:37:11.963 に答える
0

$scopeはディレクティブ内では使用できません。親についてディレクティブを伝える必要があります。Angular ドキュメントのトランスクルージョンとスコープについてのセクションを参照してください: http://docs.angularjs.org/guide/directive

scope: {
    var: '='
}

ディレクティブからイベントをscope.$emitし、 $scope.$onを使用してコントローラーでリッスンすることもできます。ディレクティブは特定の機能を持つコントローラーに関連付けられないため、これがより良い解決策だと思います。

于 2013-08-31T12:42:30.460 に答える