你能把函数调用放在 AngularJS 表达式中吗？

Question

我正在学习 W3School 的 Angular 课程，我很困惑为什么我不能将函数调用放在 Angular 表达式中 - 只是为了好玩，即使如果我发现这可能不是最佳实践稍后再说：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
function add() { return 5+5 }
</script>
<body>

<div ng-app>
<p>My first expression: {{ add() }}</p>
</div>

</body>
</html>

Answer 1

可以，但是需要在控制器中定义函数，因为这是 {{ }} 符号指示 Angular 查看的位置。

angular.module('app', [])
  .controller('ctrl', function() {
    this.add = () => {
      return 5 + 5;
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as $ctrl">
  {{ $ctrl.add() }}
</div>

Answer 2

全局函数默认绑定到 window 对象。所以，如果你在 window 对象中有函数，你可以将它直接绑定到控制器的 $scope 并在你的模板中使用它。

angular.module('app', [])
  .controller('ctrl', function($scope, $window) {
    $scope.add = $window.add;
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>

<script>
function add() { return 5+5 }
</script>

<div ng-app="app" ng-controller="ctrl">
  {{ add() }}
</div>

你能把函数调用放在 AngularJS 表达式中吗？

Can you put a function call in an AngularJS expression?

function

call

angularjs