在 AngularJS 控制器中声明函数的方法（controllerAs 方法）答案

【问题标题】：Ways to declare Function in AngularJS Controller (controllerAs approach)在 AngularJS 控制器中声明函数的方法（controllerAs 方法）
【发布时间】：2016-09-21 10:46:00
【问题描述】：

我使用 controller as 方法而不是 $scope。我在从 HTML 调用方法时遇到了一些问题。所以，问题是，在这种方法中声明和调用函数有多少种方法。

首先：（如果我想先做某事）

var vm= this ; 
vm.dataOne=[];

function funcOne() {
        myService.serviceFunc()
            .then(function (response) {
                vm.dataOne= response.data;
            });
    };
function activate() {
        funcOne();
        }
    activate();

秒：（如果我想根据函数返回值来初始化一个变量）

 vm.dataTwo = function () {
        doSomeThing();
 }

还有什么办法吗？
应该如何在控制器中定义一个函数将从 HTML 调用，如
```
ng-click = "ctrl.dataTwo()";   
```

【问题讨论】：

在您的应用程序中使用controllerAs 格式时，您应该在函数之前放置vm 而不是$scope。如果你在控制器中使用函数而不在HTML中使用，则不需要在函数前添加vm。
正是我这样做。在第一个代码中，我没有使用 vm，因为它是私有的并且将在本地调用。但在第二个代码中，我使用了 vm.dataTwo，因为我想从 HTML 作为公共方法访问它。然后从 HTML 我调用 ctrl.dataTwo() 但我不知道为什么不调用它。 (myController as ctrl)
你能创建 plunker 吗？
你的两个函数都是私有的。要使用它们，您必须执行vm.funcOne = funcOne; 和vm.activate = activate;。顺便说一句，恭喜你接受了别名！你离更简洁的代码又近了一步。
我在评论中提到的第二个函数是 vm.dataTwo，而不是 activate()。我的意思是当我使用 vm.something 时，这是公开的，否则是私有的。

标签： javascript angularjs function angularjs-controlleras

【解决方案1】：

您定义的函数是私有的：

function functionOne() {

}; // Just function body, no need of semicolon

这些被称为函数声明。目前，它们只能在您的控制器中访问。

为了能够调用它们，请将它们附加到控制器，以便它们成为控制器变量：

vm.functionOne = functionOne;

这种方法的一个优点是您可以在实际调用函数后定义函数，这与使用 $scope 或 $this 的方式不同。它们通过提升被识别，并被调用。

关于从函数初始化返回值，只需调用它：

vm.someVariable = someFunction();

一些参考资料：

var functionName = function() {} vs function functionName() {}

Private Members in JavaScript

Angular Function Declarations, Function Expressions, and Readable Code

Angular Style Guide

【讨论】：

好的，正如我提到的，我完全按照这个约定定义了方法。但问题是，除了以上这些方法之外，还有其他方法吗？因为我的函数没有被执行（不是从 HTML 调用）
@Elnaz 他们绝对应该工作。你确定你正确地定义了它们吗？发布一个 jsFiddle 或 Plunker 以供参考和测试。

【解决方案2】：

使用 ng-controller="cntrl as vm" 语法的第一种方式：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
  {{vm.name}}
</div>

</body>
</html>

使用controllerAs作为指令属性之一的第二种方式：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .directive('customDir', function() {
       return {
           restrict: 'EA',
           template: '<div>{{vm.name}}</div>',
           controller: function(){
               var vm = this;
               vm.name = 'Custom Directive';
           },
           controllerAs: 'vm'
       } 
   });
</script>
<body>

<div ng-app="MyApp">
  <div custom-dir></div>
</div>

</body>
</html>

使用“controller as”语法调用函数的方法，该语法在控制器中定义但在 html 中调用：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   angular.module('MyApp', [])
   .controller('MyCntrl', function($scope) {
       var vm = this;
       vm.name = 'Custom Directive';

       vm.someFunction = function() {
         vm.name = 'Button is Clicked!!!';
       };
   });
</script>
<body>

<div ng-app="MyApp" ng-controller="MyCntrl as vm">
 {{vm.name}}
 <input type='button' ng-click="vm.someFunction()" value="Click" /> 
</div>

</body>
</html>

【讨论】：

这个答案似乎很笼统。 OP 专门询问函数调用。
您的评论也被合并并添加到上面。

【解决方案3】：

其他方式，使用函数作为构造函数并向原型

添加功能

function Ctrl($window) {
  this.$window = $window;
}

Ctrl.inject = ['$window']

Ctrl.prototype.click = function() {
  this.$window.alert('clicked')
}

angular.module('app', [])
.controller('ctrl', Ctrl)

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

<div ng-app='app' ng-controller='ctrl as c'>
  <button ng-click='c.click()'>Click me!</button>  
</div>

【讨论】：