角。将元素添加到正文，从控制器更改为指令

Question

我正在做一个有角度的画廊，这个画廊有一个灯箱视图，当点击画廊项目时，它会显示带有深色背景的图像。

现在我在 controller 中有代码，它的作用如下：

$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 相关的代码放在控制器中从来都不是一个好主意。

Answer 1

很遗憾，我没有足够的代表发表评论。

但是对于模态元素的情况，我不知道怎么做this。

具体做什么？你想让指令执行上面的代码吗？试试这个：

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

我也会考虑使用 ui.bootstrap 或类似的东西来完成这样的任务。