使用自定义指令时，ngShow 无法按预期工作

Question

我有这个角度的代码：

<span ng-mouseover="item.show_description=true" ng-mouseleave="item.show_description=false" pointer="{x: item.x, y: item.y}">
    {{item.label}}
</span>
<div class="description-popup" ng-show="!!item.description && item.show_description"
     style="left: {{item.x}}px; top: {{item.y}}px">
    <h2>{{item.label}}</h2>
    <p>{{item.description}}</p>
    <p>{{!!item.description && item.show_description}}</p>
</div>

它正确显示弹出窗口，但如果描述为空或空字符串，弹出窗口仍然显示。在这种情况下，最后一个表达式显示为 false。我在这里做错了什么？或者那里可能有错误。我正在使用 Angular 1.0.6（目前无法升级）。

更新：

我已经创建了 JSFiddle 并且似乎 ng-show 按预期工作，但当我使用指针指令时，使用 mousemove 事件时却没有。该指令的代码如下：

app.directive('pointer', function($parse) {
    function objectParser(expr) {
        var strip = expr.replace(/\s*\{\s*|\s*\}\s*/g, '');
        var pairs = strip.split(/\s*,\s*/);
        if (pairs.length) {
            var getters = {};
            var tmp;
            for (var i=pairs.length; i--;) {
                tmp = pairs[i].split(/\s*:\s*/);
                if (tmp.length != 2) {
                    throw new Error(expr + " is Invalid Object");
                }
                getters[tmp[0]] = $parse(tmp[1]);
            }
            return {
                assign: function(context, object) {
                    for (var key in object) {
                        if (object.hasOwnProperty(key)) {
                            if (getters[key]) {
                                getters[key].assign(context, object[key]);
                            }
                        }
                    }
                }
            }
        }
    }



    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var expr = objectParser(attrs.pointer);
            element.mousemove(function(e) {
                var offest = element.offset();
                scope.$apply(function() {
                    expr.assign(scope, {
                        x: e.pageX - offest.left,
                        y: e.pageY - offest.top
                    });
                });
            });
        }
    };

});

Answer 1

隔离范围

问题是ng-show 使用它所在元素的范围。如果它位于具有隔离范围指令的元素上，那么它将使用该隔离范围，并且无法访问外部范围。

在这种特殊情况下，我怀疑 description-popup 具有隔离范围，这意味着 ng-show 只能访问该指令的范围，而该指令可能没有您要测试的 item反对。

什么是隔离范围？

隔离范围意味着指令有自己的范围，它不从周围的范围继承。普通作用域继承自周围作用域，因此它们可以访问该周围作用域上的数据。隔离范围没有。

为什么会有人想要使用隔离作用域？！

重复使用。如果一个指令打算在很多地方重用，在很多不同的范围内使用各种属性，你不希望指令范围内的属性与周围范围的属性发生冲突。而且由于该指令应该是完全独立的并且根本不使用周围的范围，因此给它一个隔离范围通常是个好主意。这样做的缺点很少。确实，唯一可能出错的是有人想在该元素上放置 ng-show 或 ng-hide。

解决方案

在description-popup 周围加上一个额外的<div> ng-show：

<div ng-show="!!item.description && item.show_description">
    <div class="description-popup"
         style="left: {{item.x}}px; top: {{item.y}}px">
        <h2>{{item.label}}</h2>
        <p>{{item.description}}</p>
        <p>{{!!item.description && item.show_description}}</p>
    </div>
</div>

这是假设 JSFiddle 中的行为是你想要的。

这可能只适用于 Angular https://docs.angularjs.org/guide/migration#isolate-scope-only-exposed-to-directives-with-scope-property