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

Question

我有这个 Angular 代码:

<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>

它正确显示弹出窗口，但如果 descritpion 为 null 或空字符串，弹出窗口仍会显示。这种情况下的最后一个表达式显示为 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在那个元素上。

解决方案

把你的 ng-show额外<div> description-popup周围:

<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 < 1.2 的版本。在 1.2 中，隔离范围的行为似乎已被清理:https://docs.angularjs.org/guide/migration#isolate-scope-only-exposed-to-directives-with-scope-property