3

私は angular.js を初めて使用するので、ここで説明する機能を最適に実装する方法についてアドバイスを求めています。によって提供されるヘッダー、サイドバー、およびコンテンツ領域を含む html 本文があり<div class="container-fluid" ng-view></div>ます。これは標準の twitter-bootstrap レイアウト であるため、は要素ng-viewの直接の子孫ではありません。body

無限にスクロール可能なリストを含むビューが 1 つあります。リストの少なくとも 1 つの要素が選択されている場合、コンテキスト アクションを含むフッターをスライドアップしたい (フッターは、position:fixed常にリストの上に表示されるようにする必要があります)。本質的に、これは Windows 8 Metro のホーム画面でタイルを右クリックしたときに起こることと似ています。

私が今抱えている問題は、DOMng-viewの直下に存在する必要があるため、フッターをパーシャルの一部にすることができないことです。bodyAngular.js でこれを処理する良い方法は何ng-viewですか? また、リストと動的フッター用に単一のコントローラーを保持したい場合はどうすればよいですか? これに対する CSS ソリューションがある場合は、それについても喜んでお知らせします。

4

1 に答える 1

3

ng-view必要なレイアウトを処理するには、要素の外側にフッターを配置する必要があるようです。レイアウト/CSS はお任せしますが、次の例は、ディレクティブが ng-view の外にある場合にディレクティブと通信する方法を示しています。

これが plunkr です ( http://plnkr.co/edit/NpoIrOdfvn9XZiXY9YyV?p=preview )。

HTML

<body ng-app="someApp">
    <div ng-view></div>
    <footer-directive></footer-directive>
</body>

JS

angular.module('someApp', []).config(function($routeProvider) {
    $routeProvider.when('/', {
        template: '<p>template</p>',
        controller: 'SomeCtrl'
    }).otherwise({
        redirectTo: '/'
    });
}).service('broadcastService', function($rootScope, $log) {
    this.broadcast = function(eventName, payload) {
        $log.info('broadcasting: ' + eventName + payload);
        $rootScope.$broadcast(eventName, payload);
    };
}).controller('SomeCtrl', function(broadcastService, $log, $timeout) {
    //fire off showfooter message
    broadcastService.broadcast('ShowFooter', {
        some: 'data'
    });

    // wait 3 seconds and hide footer
    $timeout(function() {
        //fire off hide message
        broadcastService.broadcast('HideFooter');
    }, 3000);

}).directive('footerDirective', function(broadcastService, $log) {
    return {
        restrict: 'E',
        link: function(scope, elm, attr) {
            elm.hide();
            scope.$on('ShowFooter', function(payload) {
                $log.info('payload received');
                $log.debug(payload);
                // assuming you have jQuery
                elm.show();
            });
            scope.$on('HideFooter', function() {
                // assuming you have jQuery
                elm.hide();
            });
        }
    }
});
于 2013-07-02T15:11:17.053 に答える