Javascript 在 AngularJS 控制器中声明函数的方法（controllerAs 方法）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37409873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ways to declare Function in AngularJS Controller (controllerAs approach)
提问by Elnaz
I use controller asapproach instead of $scope. I have some problems with method calling from HTML. So, the question is that, how many ways exist in declare and call functions in this approach.
我使用控制器作为方法而不是 $scope。我在从 HTML 调用方法时遇到了一些问题。所以，问题是，在这种方法中声明和调用函数有多少种方法。
first: (If I want to do s.th. at first)
第一：（如果我一开始想做某事）
var vm= this ;
vm.dataOne=[];
function funcOne() {
myService.serviceFunc()
.then(function (response) {
vm.dataOne= response.data;
});
};
function activate() {
funcOne();
}
activate();
second: (If I want to initialize a variable based on a function returned value )
第二：（如果我想根据函数返回值初始化一个变量）
vm.dataTwo = function () {
doSomeThing();
}
- Is there any way, too?
How should define a function in controller which will be called from HTML, as
ng-click = "ctrl.dataTwo()";
- 也有办法吗？
如何在控制器中定义一个从 HTML 调用的函数，如
ng-click = "ctrl.dataTwo()";
回答by cst1992
Functions the way you've defined are private:
您定义的函数是私有的：
function functionOne() {
}; // Just function body, no need of semicolon
These are known as function declarations. Currently, they are only accessible within your controller.
这些被称为函数声明。目前，它们只能在您的控制器中访问。
To be able to call them, attach them to the controller so they become controller variables:
为了能够调用它们，将它们附加到控制器，使它们成为控制器变量：
vm.functionOne = functionOne;
An advantage of this approach is that you can define functions after actually calling them, as opposed to how you do with $scopeor $this. They are recognized via hoisting, and called.
这种方法的一个优点是您可以在实际调用函数后定义它们，而不是您如何使用$scope或$this。它们通过提升被识别，并被调用。
About your initializing a returned value from a function, just call it:
关于从函数初始化返回值，只需调用它：
vm.someVariable = someFunction();
Some references:
一些参考：
var functionName = function() {} vs function functionName() {}
var functionName = function() {} vs function functionName() {}
Angular Function Declarations, Function Expressions, and Readable Code
回答by Suneet Bansal
First way using ng-controller="cntrl as vm" syntax:
第一种使用 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>
Second way using controllerAs as one of the attribute of directive:
第二种方式使用 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>
Way to calling a function with "controller as" syntax which is defined in controller but called in html:
使用在控制器中定义但在 html 中调用的“controller as”语法调用函数的方法：
<!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>
回答by Krzysztof Safjanowski
Other way, use function as constructor and add functionality to prototype
其他方式，使用函数作为构造函数并向原型添加功能
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>