Question

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

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

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

我的问题：是否可以从控制器外部附加这样的事件处理函数，如下所示？

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

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

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

谢谢！

Answer 1

思考绑定。您想在视图（ng-click和内部div可以绑定到）的范围上引入变量。将此变量设为布尔值是有意义的，这样当它变化时，它将更新视图。

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

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

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

点击链接后，它会切换＆＃39; showDiv＆＃39;它保存在SampleController的范围内。因为，内部div上的ng-show指令被绑定到“显示”。（与SampleController的范围相同的showDiv），它将根据＆＃39; showDiv＆＃39;的值自动显示和隐藏。

<强> [编辑]

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

当然可以定义一个在SampleController外部的范围变量，并将其绑定到内部控制器中的视图：

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

<div ng-controller="SampleController">

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

这是因为范围继承。具有范围继承时，子范围从父范围继承范围变量。在上面的示例中，您具有继承自外部控制器（父作用域）范围的SampleController（子作用域）的作用域。如果没有父控制器，则父作用域只是根作用域。重要的一点是子范围继承自父范围，并继承其所有范围变量。

在上面的示例中，ng-show绑定到showDiv，但它实际上还没有被分配给任何范围内的范围变量（尚未）。所以最初，＆＃39; showDiv＆＃39;未定义，但它仍然隐藏，因为在角度中，undefined在评估时被视为false。单击链接后，将分配showDiv！showDiv。正是在这一点上，范围变量＆＃39; showDiv＆＃39;已创建，并且由于赋值发生在SampleController之外，因此在父作用域中创建作用域变量 - 在本例中为根作用域。

由于showDiv在锚链接和ng-show指令中都绑定了相同的范围变量，因此对范围变量＆gt; showDiv＆＃39;进行任何更改。（例如单击链接）将传播到绑定到它的所有视图（包含隐藏内容的div）。

Answer 2

您始终可以使用服务和指令在不同范围之间共享值。

 app.service('SharedService', function(){
   this.showHiddenDiv = false;
 });

app.directive('showDiv', function(SharedService){

  return {
    restrict: 'AC',
    link : function(scope, element, attr) {
       scope.showHiddenDiv = SharedService.showHiddenDiv;
       scope.toggleDiv = function(){
         SharedService.showHiddenDiv = SharedService.showHiddenDiv ? false : true;
       }
    }
  }
})

HTML：

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

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

作为旁注，每当你试图操纵DOM时，你应该在一个指令中这样做，这是有角度的方式！

事件目标在控制器范围外

2 个答案: