1

私は角度のあるギャラリーを行っています。このギャラリーには、ギャラリー アイテムがクリックされたときに背景が暗い画像を表示するライト ボックス ビューがあります。

現在、コントローラー内に次のようなトリックを行うコードがあります。

$scope.modal = function (iElement) {
    var darkDiv = angular.element('<div class="modal__dark-background"></div>');
    var body = angular.element(document).find('body');
    var overlay = $compile(darkDiv)($scope);
    body.prepend(overlay);
}

メイン テンプレートをカスタム要素に挿入するディレクティブもあります。

myApp.directive('gallery', function() {
    return {
        restrict: 'E',
        templateUrl: 'partials/gallery.template.html'
    }
})

私の問題は、コントローラー内のコードの機能を持つディレクティブを作成する方法がわからないことです。DOM 関連のコードをコントローラー内に配置することは決して良い考えではないので、私はこれをやりたいと思っています。

4

1 に答える 1

1

残念ながら、コメントするのに十分な担当者がいません。

しかし、モーダル要素の場合、これを行う方法がわかりません。

正確には何をしますか？ディレクティブで上記のコードを実行しますか? これを試して：

myApp.directive('gallery', function($scope) {
    return {
        restrict: 'E',
        templateUrl: 'partials/gallery.template.html',
        controller: function(){
            $scope.modal = ...
        }
    }
})

また、このようなタスクには ui.bootstrap などを使用することを検討します。

于 2015-09-25T09:02:11.473 に答える