0

所以我有两个具有相同指令的元素：（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，单击过滤器标题会将 showFilterList 更改为 true，从而过滤器列表获得“显示”类。在元素外部单击会将 showFilterList 设置为 false 并再次隐藏 filter-list。在一个场景中一切正常：单击第一个元素过滤器标题并显示过滤器列表。单击第二个元素 filter-title 将显示自己 filter-list 但不会将已单击的第一个元素设置为 false。

我该怎么做才能让每个指令在触发时都有自己的范围？

谢谢！

4

1 回答 1

0

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

从您的代码中，我猜您的代码中还有其他东西可能会导致它像您一样，show:datePickerModel.showFilterList而您在其他任何地方都有showFilterList。问题可能是 showFilterList 是由其他东西在父范围内创建的。

尝试在codepen或fiddle中重新创建您的问题，它为我们提供了一些代码来帮助您解决问题，而且我经常发现在干净的环境中重做问题可以让我找到问题所在。

于 2013-09-19T00:18:13.840 回答