Question

我是Angularjs的新手。我在网上遇到了一个例子，让我很困惑。这是代码：

angular.module("testApp",[]).controller("testCtrl", function($scope){

    var data = "Hello";

    $scope.getData = function(){
        return data;
    }

    $scope.setData = function(newData){
        data = newData;
    }
});

以下是观点：

<html ng-app = "testApp">
    <head>
        <script src="lib/Angular.js"></script>
        <script src = "foo.js"></script>
    </head>
    <body ng-controller="testCtrl">
        <div ng-click="setData('Hello Hello')">{{getData()}}</div>
    </body>
</html>

我的问题是角度如何知道何时触发视图中的getData（）方法。 click事件将更改数据。然而它是一个私有变量，没有附加到$ scope，这意味着$ scope不会观察它的变化，那么angular如何知道何时在视图中调用getData（）？我知道这可能是一个愚蠢的问题，但请帮忙！非常感谢你！

Answer 1

双卷曲表达式是AngularJS调用观察指令的表达式。在编译阶段，该指令使用范围的$watch方法在表达式上注册侦听器。

另一方面，ng-click是AngularJS调用侦听器指令的内容。这种类型的指令使用DOM注册侦听器。每当DOM事件触发时，该指令都会在$apply调用中执行关联的表达式。

这意味着执行单击表达式后，将开始$digest个循环。在此循环中，作用域检查所有已注册的$watch表达式（例如，包含getData()的双卷曲表达式），并在与前一个值存在差异的情况下调用侦听器。

最后，正是这个摘要周期确保了所有绑定的表达式都得到了评估。

Answer 2

顶级控制器函数在呈现视图之前立即运行，以初始化范围。接下来，视图加载，视图中的任何逻辑都会执行。所以当它到达getData()时，它会返回那个时候该函数的输出。

聪明的部分是Angular会自动将视图中的数据一直绑定到数据模型，因此每当模型中的更改（即数据源）自动更新视图中的值时如有必要，将多次运行getData()方法。

我保存了here as a Plnkr

Answer 3

您的绑定{{getData()}}是“运行评估”。因此，当DOM渲染并对其进行角度解析时，它会在最后看到()并运行该函数。我会在一分钟内提供引文。

Answer 4

你不需要在angularjs中使用getData，也可能用于你正在那里展示的其他用途。

所以正确的代码是（没有getData）：

    <html ng-app = "testApp">
    <head>
        <script src="lib/Angular.js"></script>
        <script src = "foo.js"></script>
    </head>
    <body ng-controller="testCtrl">
        <div ng-click="setData('Hello Hello')">{{data}}</div>
    </body>
</html>

使用getData：

    $scope.getData = function(){
        data = 'Hello World';
    }

<html ng-app = "testApp">
    <head>
        <script src="lib/Angular.js"></script>
        <script src = "foo.js"></script>
    </head>
    <body ng-controller="testCtrl">
        <div ng-init="getData()" ng-click="setData('Hello Hello')">{{data}}</div>
    </body>
</html>

控制器函数中的AngularJS私有变量

4 个答案: