Angular。将元素添加到主体，从控制器更改为指令

Question

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

现在我在 控制器 中有代码，它的作用如下：

$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

不幸的是，我没有足够的代表发表评论。

But I don't know how to do this for the case of the modal element.

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

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

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

Angular。将元素添加到主体，从控制器更改为指令

Angular. Prepend element to body, change from controller to directive

angularjs

angularjs-directive

angular-controller