Question

所以我有两个具有相同指令的元素：（coffeescript）

myApp.directive "clickOutside", ["$document", ($document) ->
    restrict: "A"
    link: (scope, elem, attr, ctrl) ->
        elem.bind "click", (e) ->
            e.stopPropagation()
        $document.bind "click", ->
            scope.$apply attr.clickOutside
]

和HTML：

<div class="filter-box" click-outside="showFilterList=false">
    <div class="filter-title" ng-click="showFilterList=!showFilterList;">Open</div>
    <ul class="filter-list" ng-class="{show:datePickerModel.showFilterList}">
        <li></li>
        ...
        ...
    </ul>
</div>

<div class="filter-box" click-outside="showFilterList=false">
    <div class="filter-title" ng-click="showFilterList=!showFilterList;">Open</div>
    <ul class="filter-list" ng-class="{show:datePickerModel.showFilterList}">
        <li></li>
        ...
        ...
    </ul>
</div>

我有2个DIV，单击filter-title会将showFilterList更改为true，并且filter-list会获得'show'类。单击元素外部会将showFilterList设置为false，并再次隐藏filter-list。对于一个场景，一切都工作得很好：单击第一个元素filter-title并显示filter-list。单击第二个元素filter-title将显示自己的filter-list，但不会将已经单击的第一个元素设置为false。

我怎么能这样做，所以每个指令在触发时都有自己的范围？

谢谢！

Answer 1

Florian的答案对于为指令创建一个孤立的范围是正确的，请参阅：http://docs.angularjs.org/guide/directive（根据文档，它应该是scope: true。

在您的代码中，我猜您的代码中还有其他内容可能会导致它show:datePickerModel.showFilterList，而在其他任何地方showFilterList。可能问题是showFilterList是通过其他东西在父作用域中创建的。

尝试在codepen或fiddle中重新创建问题，它会为我们提供一些代码来帮助您，并且我经常发现在干净的环境中重做问题会让我发现无论如何这个问题。

angularjs多个元素的相同指令（外部点击）

1 个答案: