Question

我看到几乎教程在AngularJS中使用匿名函数，而不是正常函数，如函数名（para1）{}。请参阅此链接：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，则无法通过角度调用该功能。因此，合同是在控制器函数中，您将所需的所有内容添加到框架传递的$scope对象中，这样，您可以稍后访问字段或从模板中调用函数。您在ng-model或放入{{ }}等指令中引用的所有内容都将通过角度进行评估，但角度并不知道您在代码段链接中所写的表达式fullName()的含义或写入main.fullName()时未能在控制器中找到它。

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

Answer 2

你可以做什么（这也是一个很好的做法）是声明你的功能，然后（可能在控制器的初始化）将它们分配给$ 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中使用匿名函数

2 个答案: