Question

我在同一页面中有两个元素：

一个是div，另一个是叠加。

我想只显示叠加层内的元素而不显示页面中的元素（它也会被叠加层隐藏）。

我不知道如何防止这种情况......我通过属性绑定指令，也许我应该将其他一些参数传递给元素？

这是一个很好的例子：Plunker

正如你所看到的，当模态（简单示例，但我使用另一个插件）打开时，我希望在页面中隐藏文本，并以模态显示它，反之亦然......我更喜欢只使用指令和/或更多元素中的属性......

我测试了很多，但我找不到解决方案......

代码：

angular...[]....directive('example', function() {
    return {
        restrict: 'A',
        replace: true,
        link: function($scope, $element, $attrs) {
            $scope.display = "IT's WORK TEXT BY DIRECTIVE";
        }
    };
});


<script type="text/ng-template" id="myModalContent.html">
    <!--Modal-->
    <div class="modal-body">
        <span example="" class="text-danger"><br><br>{{display}}<br><br></span>
    </div>
</script>

<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<span example="" class="text-danger"><br><br>{{display}}<br><br></span>

Answer 1

您可以结合使用ng-show和传递给模态的js闭包来切换文本的可见性。所以...显示可见性将由ng-show

控制

<span example="" ng-show="elemVisibility" class="text-danger"><br><br>{{display}}<br><br></span>

您可以使用js辅助函数

切换可见性

function _setElemVisiblity (isModalOpen) {
   $scope.elemVisibility = !isModalOpen;
}

您可以将此作为回调传递给模态，并在打开/关闭模态时触发它。

Updated plunk here

指令中的优先元素

1 个答案: