使用什么而不是角度范围功能？
[英]What to use instead of angular scope functions?
问题描述
I don't like angular scope functions - they don't have a clear contract. 
我不喜欢角度范围功能 - 他们没有明确的合同。 They take their parameters somewhere in the scope and put their results somewhere to scope instead of explicitly take parameters as function parameters and return the result. 它们将参数放在范围内的某个位置，并将其结果放在某个范围内，而不是显式地将参数作为函数参数并return结果。 Take this example ( plunkr ): 举个例子（ plunkr ）：
HTML HTML
<html ng-app="exampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="myctrl.js"></script>
</head>
<body ng-controller="MyCtrl">
Here is my params:
<input type="number" ng-model="first"> + <input type="number" ng-model="second">
<button ng-click="sum()">Sum it!</button>
<p>{{result}}</p>
</body>
</html>
JS JS
//myctrl.js
var app = angular.module('exampleApp', []);
app.controller('MyCtrl', function($scope) {
$scope.sum = function() {
$scope.result = $scope.first + $scope.second;
}
});
As soon as the function becomes bigger than 10 lines, it can be tricky to understand what should be its main result. 一旦函数变得大于10行，理解它的主要结果应该是很棘手的。 Also I don't understand how to document it with jsdoc. 另外我不明白如何用jsdoc记录它。 Is there some best practice for better functions in angular? 是否有更好的角度功能的最佳实践？
PS The example here is a bit synthetic, most of the time my function would ask the angular service something and transform the result for display. PS这里的例子有点合成，大多数时候我的函数会询问角度服务的东西并转换结果进行显示。
PPS Many people suggest controller as syntax, but I think it doesn't solve the problem completely, the function still can't have return value and all that it does is hidden in side-effects. PPS很多人建议使用controller as语法，但我认为它不能完全解决问题，函数仍然不能具有返回值，它所做的一切都隐藏在副作用中。
3 个解决方案
解决方案1
0 2016-08-02 07:21:42
You can use controller as instead of $scope . 您可以使用controller as代替$scope 。
<body ng-controller="MyCtrl as ctrl">
<body ng-controller="MyCtrl as ctrl">
Here is my params:
<input type="number" ng-model="ctrl.first"> + <input type="number" ng-model="ctrl.second">
<button ng-click="ctrl.sum()">Sum it!</button>
<p>{{ctrl.result}}</p>
</body>
IN JS 在JS
//myctrl.js //myctrl.js
var app = angular.module('exampleApp', []);
app.controller('MyCtrl', function() {
var vm = this;
vm.sum = function() {
vm.result = vm.first + vm.second;
}
});
解决方案2
0 2016-08-02 07:22:32
Yes, attaching everything to the scope object can be troublesome in that dependencies become unclear and the implementation becomes longer. 是的，将所有内容附加到作用域对象可能很麻烦，因为依赖性变得不清楚并且实现变得更长。 The alternative is to publish the controller as object into the scope and have the view bind to it directly using the controller as syntax: 另一种方法是将控制器作为对象发布到作用域中，并使用controller as将视图直接绑定到它controller as语法：
function MyCtrl() {
this.first = 0;
this.second = 0;
this.result = 0;
}
MyCtrl.prototype.sum = function () {
this.result = this.first + this.second;
}
angular.module('example', []).controller('MyCtrl', MyCtrl);
<body ng-controller="MyCtrl as ctrl">
Here is my params:
<input type="number" ng-model="ctrl.first"> + <input type="number" ng-model="ctrl.second">
<button ng-click="ctrl.sum()">Sum it!</button>
<p>{{ ctrl.result }}</p>
</body>
See https://docs.angularjs.org/api/ng/directive/ngController#example . 请参阅https://docs.angularjs.org/api/ng/directive/ngController#example 。
解决方案3
0 2016-08-02 07:24:16
According to the " Angular Style guide " published in the GitHub, You should be using the the controllerAs syntax over the classic controller with $scope syntax. 据“ 角样式指南发表在GitHub上”，你应该使用的controllerAs在经典控制器与语法$scope语法。
Reason #1 : Controllers are constructed, "newed" up, and provide a single new instance, and the controllerAs syntax is closer to that of a JavaScript constructor than the classic $scope syntax. 原因＃1 ：控制器被构造，“新近”并提供单个新实例，并且controllerAs语法比经典$ scope语法更接近JavaScript构造函数的语法。
Reason #2 : It promotes the use of binding to a "dotted" object in the View (eg customer.name instead of name), which is more contextual, easier to read, and avoids any reference issues that may occur without "dotting". 原因＃2 ：它促进了对视图中“点”对象的绑定的使用（例如，customer.name而不是name），这更加符合上下文，更易于阅读，并且避免了在没有“点”的情况下可能出现的任何参考问题。
Reason #3 : Helps avoid using $parent calls in Views with nested controllers. 原因＃3 ：帮助避免在具有嵌套控制器的Views中使用$ parent调用。
<!-- avoid -->
<div ng-controller="CustomerController">
{{ name }}
</div>
<!-- recommended -->
<div ng-controller="CustomerController as customer">
{{ customer.name }}
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.