控制器范围之外的事件目标

event target outside controller scope

本文关键字：事件 目标 范围 控制器      更新时间：2023-09-26

使用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()函数。我知道我可以把所有东西都包装在另一个容器中，使控制器范围，但我想知道是否有可能这样做。

谢谢!

考虑绑定。您希望在视图的作用域中引入一个变量(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>

当链接被点击时，它将切换'showDiv'，它保存在SampleController的作用域上。由于内部div上的ng-show指令被绑定到'showDiv'(与SampleController的作用域中的showDiv相同)，它将根据'showDiv'的值自动显示和隐藏。

[编辑]

最初的问题我答不上来，所以我再试一次。

当然可以在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，但它实际上还没有被分配给任何作用域的作用域变量。最初，'showDiv'是undefined但它仍然是隐藏的因为在angular中，undefined在求值时被视为false。单击链接后，showDiv被分配为!showDiv。正是在这一点上，创建了作用域变量'showDiv'，并且由于赋值发生在SampleController之外，所以作用域变量是在父作用域中创建的——在本例中是根作用域。

因为showDiv在锚链接和ng-show指令中都被绑定到同一个作用域变量，所以对作用域变量'showDiv'的任何更改(比如点击链接)，都会传播到与它绑定的所有视图(包含隐藏内容的div)。

你总是可以使用一个服务和一个指令来在不同的作用域之间共享一个值。

 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，你应该这样做在一个指令，这是角的方式!

相关文章：