为什么总是在 AngularJS 中使用匿名函数

Question

我看到几乎教程在 AngularJS 中使用匿名函数，而不是普通函数，例如 function name(para1) {}。请看这个link：http://www.w3schools.com/angular/tryit.asp?filename=try_ng_controller_property

改成正常功能，还是不行，请指教。谢谢

<div ng-app="myApp" ng-controller="personCtrl as main">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{main.fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    function fullName() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

Answer 1

$scope 的想法是拥有一个定义所有字段和函数的对象，以便您能够从模板中引用字段和函数。

当您不将函数附加到 $scope 时，调用 angular 将不可见。所以合同是在你的控制器函数中，你将你需要的一切添加到框架传递的 $scope 对象中，这样你以后就可以访问字段或从你的模板中调用函数。您在 ng-model 等指令中引用或放入 {{ }} 的所有内容都将由 angular 计算，但 angular 不知道表达式 fullName() 的含义如您的代码段 link 中所写，或者当写为 main.fullName().

时无法在控制器中找到它

有关 $scope 概念的详细信息，请查看 the angular docs on scopes。

Answer 2

你可以做的（这也是一个好习惯）是声明你的函数，然后（也许在 controlr 的 init 中）将它们分配给 $scope ..所以你什么时候会更清楚重新阅读它：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = fullName; //<-- here you assign it


    function fullName() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
</script>

</body>
</html>

为什么总是在 AngularJS 中使用匿名函数

Why will always use anonymous function in AngularJS

javascript

angularjs

angularjs-scope

angularjs-controller