Question

我是新编写自定义指令的人。我试图以角度创建类似背景（modal ui.bootstrap）的东西这是我正在努力的小提琴：LINK。

这就是我想要的：当用户点击按钮（左上角）菜单打开时，我希望在菜单外单击后关闭它。

指令：

    app.directive("Trigger", function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs, event) {
            element.click(function(){
if (e.target.id != "parentUl" && !$(e.target).closest("#rightMenu").length) {
            $("#rightMenu").removeClass("noneStyle");
        }
            });
        }
    };
});

我不确切地知道restrict: 'C'是否适合这种情况谢谢你的帮助。

Answer 1

在CSS中运行并阅读评论 http://jsfiddle.net/evqw2zhp/3/

JS：

app.directive("trigger", function () {
    return {
        restrict: 'C',
        scope: '=noneStyle',
        link: function (scope, element, attrs) {
            $(element).click(function (e) {
                $("#rightMenu").removeClass("noneStyle");
                scope.noneStyle = false;
                scope.$apply();
                console.log(scope);
            });
        }
    };
});

CSS：

当底部= 0时，由于左，右，上，下全部为0且位置=绝对，它将覆盖整个屏幕。

#CoverUpWholeScreen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 1; /*higher than normal element but low than right menu */
}

当右侧菜单展开时，这将覆盖整个屏幕

#CoverUpWholeScreen.show {
    bottom: 0;
}

app.directive（＆＃34; trigger＆＃34;，function（）{ 指令名称应为camelcase-＆gt; thisIsAValidDirectiveName但不是Pasalcase：ThisIsWrong 当您将其标记为HTML元素时，名称应全部小写并用破折号分隔：this-is-a-valid-directive-name

A：按属性标记 - ＆gt;这-是一个有效-指令名=＆＃34; aValueForScope＆＃34; C：A：按类别标记 - ＆gt;类=＆＃34;这-是一个有效-指令名称＆＃34; E：A：通过自定义HTML元素标记 - ＆gt; 您可以设置限制：＆＃39; ACE＆＃39;或者＆＃39; CE＆＃39;无论你想要什么样的标记方式。

范围相当复杂，单向绑定，双向绑定，隔离范围，转换范围，无范围等。我对事情的发展并不十分熟悉，所以......我帮不了你。

让我们谈谈范围：＆＃39; = noneStyle＆＃39;。 =是一个符号，告诉Angular将noneStyle绑定为两个数据绑定。即：当您更新此指令中的值时，父值范围（控制器中的范围）中的源值也将更新，反之亦然。将其设置为双向数据绑定很重要，否则值不会同步。

CoverUpWholeScreen有触发类 - ＆gt;指令，当这个指令元素 - >点击：删除右菜单类并更新控制器的值。因为这是范围外的操作（不是scope.xxx =＆＃34; aaa＆＃34 ;;或者在范围内运行函数：scope.runFn（）;），我们需要调用scope。$ apply（）;告诉棱角分明：＆＃34;嘿，我改变了一些东西，为我更新了。＆＃34;。

为什么你应该在整个屏幕上进行虚拟div掩盖是因为你不想每次检查鼠标点击事件是否扩展了右边的菜单然后删除了类。

当你在body中添加元素时，这些元素会阻挡背景（div），所以将z-index向上移动一点但不是最高，因为它也会覆盖右边的菜单。

Answer 2

获取要显示的按钮的按钮的菜单ID

 @ViewChild('mobmenu') menu:any;

在下面的oninit组件中写下

this.renderer.listenGlobal('document', 'click', (event:any) => {
console.log(this.renderer);
if(!this.menu.nativeElement.contains(event.target)){
    this.resclass="";
} else{
    if(this.resclass=="mobile_menu")
    {
        this.resclass="";   
    }
    else{
        this.resclass="mobile_menu";        
    }

}

});

如果在Angular外部单击，则隐藏元素

2 个答案: