javascript - Controller 范围之外的事件目标

使用 Angularjs，您可以将事件绑定(bind)到 dom 元素，如下所示:

<div ng-controller="SampleController">
    <a ng-click="showTheHiddenDiv()">Show the hidden div</a>

    <div ng-show="showHiddenDiv">
        hidden content
    </div>
</div>

我的问题:是否可以像这样从 Controller 外部附加这样的事件处理函数？

<a ng-click="showTheHiddenDiv()">Show the hidden div</a>

<div ng-controller="SampleController">
    <div ng-show="showHiddenDiv">
        hidden content
    </div>
</div>

这不起作用，我想知道是否有一种特殊的方式可以访问 showTheHiddenDiv() 函数。我知道我可以将所有内容都包装在另一个容器中并使其成为 Controller 范围，但我想知道是否可以这样做。

谢谢!

最佳答案

想想绑定(bind)。您想在 View 的范围内引入一个变量(ng-click 和内部 div 可以绑定(bind)到)。将此变量设为 bool 值是有意义的，这样当它更改时，它将更新 View 。

首先在作用域上创建一个 showDiv 变量，并在单击 anchor 链接时更新它:

<div ng-controller="SampleController">
    <a href="#" ng-click="showDiv = !showDiv">Show the hidden div</a>

    <div ng-show="showDiv">
        hidden content
    </div>
</div>

单击链接时，它将切换保存在 SampleController 范围内的“showDiv”。由于内部 div 上的 ng-show 指令绑定(bind)到“showDiv”(与 SampleController 作用域上的 showDiv 相同)，因此它将根据“showDiv”的值自动显示和隐藏。

[编辑]

我没能回答原来的问题，所以我再试一次。

当然可以定义一个位于 SampleController 外部的范围变量并将其绑定(bind)到内部 Controller 中的 View :

<a href="#" ng-click="showDiv = !showDiv">Show the hidden div</a>

<div ng-controller="SampleController">

    <div ng-show="showDiv">
        hidden content
    </div>
</div>

这是因为作用域继承而起作用。当您有作用域继承时，子作用域从父作用域继承作用域变量。在上面的示例中，您拥有从外部 Controller 的作用域(父作用域)继承的 SampleController 的作用域(子作用域)。如果没有父 Controller ，那么父作用域就是根作用域。重要的一点是子作用域从父作用域继承，并继承其所有作用域变量。

在上面的例子中，ng-show 绑定(bind)到 showDiv，但它实际上还没有被分配给任何作用域中的作用域变量(还)。所以最初， 'showDiv' 是 undefined 但它仍然隐藏，因为在 angular 中， undefined 在评估时被视为假。单击该链接后，showDiv 将被分配 !showDiv。正是在这一点上创建了范围变量“showDiv”，并​​且由于分配发生在 SampleController 之外，因此在父范围中创建了范围变量 - 在本例中为根范围。

由于 showDiv 在 anchor 链接和 ng-show 指令中都绑定(bind)到相同的范围变量，因此对范围变量“showDiv”的任何更改(例如单击链接)都将传播到绑定(bind)到它的所有 View ( div 包含隐藏的内容)。