Question

所以我是角色的新手。尝试仅使用角度指令制作一个简单的模态。这样做的原因是：

否需要使用 bootstrap
否需要控制器和

因此无依赖注入

        function modalTrigger() {
            return {
                restrict: 'A',
                transclude: true,
                link: function(scope, element, attrs) {
                    scope.show = false;
                    scope.toggleModal = function() {
                        console.log(scope);
                        scope.show = !scope.show;
                    };
                },
                template: '<div class="modal-trigger" ng-click="toggleModal()" ng-transclude></div>'
            };
        }

        function modalDialog() {
                return {
                    restrict: 'E',
                    transclude: true,
                    link: function(scope, element, attrs) {
                        scope.dialogStyle = {};
                        if (attrs.width)
                            scope.dialogStyle.width = attrs.width;
                        if (attrs.height)
                            scope.dialogStyle.height = attrs.height;
                        scope.hideModal = function() {
                            console.log("called hide modal");
                            scope.show = false;
                        };
                    },
                    template: "<div class='ng-modal' ng-show='show'><div class='modal-backdrop' ng-click='hideModal()'></div><div class='container' ng-style='dialogStyle'><div class='ng-modal-close' ng-click='hideModal()'><a href=''>&times;</a></div><div class='modal-content' ng-transclude></div></div></div>"
                };
            }

“modal-trigger”指令用于通过将“show”设置为true来触发“模态对话框”指令。这是两个指令

现在，如果你点击任何一个触发器，两个模态都会显示出来。如何使触发器特定于他们自己的模态？

为了更清楚，以下是关于plunker的示例：http://plnkr.co/edit/lNwTy3ddFFBBm2DPHUGA?p=preview

Answer 1

问题是两个模态都显示相同的属性（show）来显示/隐藏自己。要更正此问题，必须为每个模态确定show属性的范围，我建议如下：

拥有一个定义2个show属性的控制器：

app.controller('Ctrl', function($scope) {
    $scope.show1 = false;
    $scope.show2 = false;
});

将其激活为：

<body ng-app="angularApp" ng-controller="Ctrl as ctrl">

将模态触发器更改为具有隔离范围和show属性，如下所示：

function modalTrigger() {
    return {
        restrict: 'A',
        transclude: true,
        link: function(scope, element, attrs) {
            scope.toggleModal = function() {
                scope.show = !scope.show;
            };
        },
        scope: {
          show: '='
        },
        template: '<div class="modal-trigger" ng-click="toggleModal()" ng-transclude></div>'
    };
}

使用它，例如为：

<a href="" data-modal="modal1" modal-trigger show="ctrl.show1">Waiting List</a>

更改模态指令以使用具有show属性的隔离范围;只需添加：

        scope: {
          show: '='
        },

指令。用它作为：

<modal-dialog data-modal-name="modal1" show="ctrl.show1">

带有完整解决方案的分叉弹药：http://plnkr.co/edit/cJOXju9H3PMjRdUKqVCF?p=preview

制作一个简单的指令只是模态动态

1 个答案: