关于AngularJS中数据绑定的疑问

Doubts about data binding in AngularJS

本文关键字：数据绑定 AngularJS 关于      更新时间：2023-09-26

我正在用它做我的第一个应用程序来学习AngularJS。到目前为止，一切都很好，我很兴奋:)

但是现在我有一个console.log，这完全让我困惑，我开始认为我完全错过了一些东西。

我有一个简单的标签绑定到控制器:

<h2 ng-controller='HeaderController' ng-show='data.actualSection > 0'>
    {{titleForSection()}}
</h2>

控制器非常简单:

    uxctModule.controller ('HeaderController', function ($scope, ModelData){
    $scope.data = ModelData;
    $scope.titleForSection = function () {
        console.log ("RETURNING IT");
        return ("I SHOULD RETURN YOU SOMETHING");
    }
});

真正让我困惑的是，我注意到每次模型中发生变化时，函数都会被触发。控制器如何在没有$watch的情况下持续执行函数?

angular中的数据绑定是通过一个摘要循环完成的，这意味着angular会一遍又一遍地循环检查是否有变化，对于绑定到函数上的函数，必须对其进行求值以查找变化。

这就是为什么将UI绑定到函数的结果通常不是一个好主意。相反，你应该这样做:

标记:

<h2 ng-controller='HeaderController' ng-show='data.actualSection > 0'>
    {{sectionTitle}}
</h2>

控制器:

$scope.sectionTitle = 'I SHOULD RETURN YOU SOMETHING';
//and update it dynamically
$scope.funcToUpdateTitle = function(newTitle){
    $scope.sectionTitle = newTitle;
};

实际上，在angularJS中，所有与视图相关的函数都将在以这种方式调用摘要循环时被调用，因为你已经在HTML中调用了titleForSection()，所以当HTML中发生事件时，导致函数被执行。

希望有帮助!

相关文章：