Question

如下面的HTML所示，有一个id=contextmenu-node.的上下文菜单由于之前未定义模型isVisible，因此上下文菜单是不可见的。在我的指令ng-contextmenu，我看到右键单击文本 Right Click On the Item!当右键单击时，我将isVisible更新为true，我希望contextmenu-node可见。但是，它永远不会出现。

问题是什么？

以下是我提问的JSFiddle。

<div ng-controller="MainCtrl">
    <ul id="contextmenu-node" ng-show="isVisible">
        <li> Item 1 </li>
        <li> Item 2 </li>
    </ul>
    <div ng-contextmenu> Right Click On the Item! </div>
</div>

JS：

var myApp = angular.module("myApp",[]);

myApp.controller( "MainCtrl", [ "$scope", function($scope) {
    console.log("Main Controller loaded.");
}]);

myApp.directive( "ngContextmenu", function(){
    contextMenu = {};
    contextMenu.restrict = "AE";
    contextMenu.scope = {"isVisible": "="};
    contextMenu.link = function( lScope, lElem, lAttr ){
        lElem.on("contextmenu", function (e) {
            e.preventDefault();
            console.log("Element right clicked.");
            lScope.isVisible = true;
        });
        lElem.on("mouseleave", function(e){
            console.log("Leaved the div");
            lScope.isVisible = false;
        });
    };
    return contextMenu;
});

CSS：

#contextmenu-node{
    position: absolute;
}

Answer 1

您应该将变量传递给上下文菜单，并在修改后应用更改。在下面的标记中，将isVisible传递给指令

<div ng-contextmenu  visible="isVisible"> Right Click On the Item! </div>

并且在指令本身中您只需应用更改

lElem.on("contextmenu", function (e) {
                e.preventDefault();            
                console.log("Element right clicked.");
                $scope.$apply(function () {
                     $scope.visible = true;
                })
        });

这是jsFiddle http://jsfiddle.net/nawrockim/5Lk2V/10/

代码中的问题是，即使您定义范围，也不要将变量传递给指令

还有一件事：在mouseleave（标题元素）上隐藏ctx菜单并不是最好的选择 - 它会阻止你进入菜单 - 当你尝试它时会消失。

Answer 2

你错了是不在指令中应用范围：

 lScope.$apply(function () {
     lScope.$parent.isVisible = true;
 });

false也一样。在小提琴中我也直接得到$ parent范围而不是本地范围。这样你就可以将指令绑定到控制器范围，因此它不会作为独立类型的东西工作。也许其他人有更好的方法。

我更新了你的小提琴：http://jsfiddle.net/jorgthuijls/5Lk2V/12/

Answer 3

myApp.directive( "ngContextmenu", function(){
    contextMenu = {};
    contextMenu.restrict = "AE";
    contextMenu.scope = {"isVisible": "="};
    contextMenu.link = function( lScope, lElem, lAttr ){
        lElem.on("contextmenu", function (e) {
            e.preventDefault();
            console.log("Element right clicked.");
            lScope.isVisible = true;
        });
        lElem.on("mouseleave", function(e){
            console.log("Leaved the div");
            lScope.isVisible = false;
        });
    };
    return contextMenu;
});

你的指令上有孤立的范围。!!因此，传递与您在范围内捕获的名称相同的参数：ie。： is-visible =＆＃34; isVisible＃34;

    <div ng-controller="MainCtrl">
        <ul id="contextmenu-node" ng-show="isVisible">
            <li> Item 1 </li>
            <li> Item 2 </li>
        </ul>
        <div ng-contextmenu is-visible="isVisible"> Right Click On the Item! </div>
    </div>

使用Angularjs显示和隐藏ContextMenu

3 个答案: