Question

我使用控制器作为方法而不是$ scope。从HTML调用方法时遇到一些问题。所以，问题在于，在这种方法中声明和调用函数有多少种方式。

首先:(如果我想先做s.th.）

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()";   
```

Answer 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

Answer 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>

使用“控制器为”语法调用函数的方法，该语法在控制器中定义但在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>

Answer 3

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

添加功能

＆＃13;

function Ctrl($window) {
  this.$window = $window;
}

Ctrl.inject = ['$window']

Ctrl.prototype.click = function() {
  this.$window.alert('clicked')
}

angular.module('app', [])
.controller('ctrl', Ctrl)

＆＃13;

<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>

＆＃13;

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

3 个答案:

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

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

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