Question

我不喜欢角度范围功能 - 他们没有明确的合同。他们将参数放在范围内的某个位置，并将其结果放在某个范围内而不是显式地将参数作为函数参数和return结果。举个例子（plunkr）：

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

//myctrl.js
var app = angular.module('exampleApp', []);

app.controller('MyCtrl', function($scope) {
  $scope.sum = function() {
    $scope.result = $scope.first + $scope.second;
  }
});

一旦函数变得大于10行，理解其主要结果应该是多么棘手。另外，我不明白如何用jsdoc记录它。是否有更好的角度功能的最佳实践？

P.S。这里的例子有点合成，大部分时间我的函数会询问角度服务并转换结果以供显示。

P.P.S。许多人建议使用controller as语法，但我认为它并没有完全解决问题，函数仍然无法返回值，并且它所做的一切都隐藏在副作用中。

Answer 1

您可以使用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

// myctrl.js

var app = angular.module('exampleApp', []);

app.controller('MyCtrl', function() {
 var vm = this;
  vm.sum = function() {
   vm.result = vm.first + vm.second;
  }
});

Answer 2

是的，将所有内容附加到作用域对象可能很麻烦，因为依赖性变得不清楚，实现变得更长。另一种方法是将控制器作为对象发布到作用域中，并使用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>

请参阅https://docs.angularjs.org/api/ng/directive/ngController#example。

Answer 3

根据＆＃34; Angular Style guide ＆＃34;发布在GitHub中，您应该使用controllerAs语法而不是经典控制器$scope语法。

原因＃1 ：构建控制器，＆＃34;新增＆＃34; up，并提供一个新实例，controllerAs语法比经典$ scope语法更接近JavaScript构造函数。

原因＃2 ：它促使使用绑定到＆＃34;点缀＆＃34;视图中的对象（例如customer.name而不是name），它更具上下文性，更易于阅读，并且避免了没有＆＃34; dotting＆＃34;可能发生的任何参考问题。

原因＃3 ：有助于避免在具有嵌套控制器的视图中使用$ parent调用。

<!-- avoid -->
<div ng-controller="CustomerController">
    {{ name }}
</div>


<!-- recommended -->
<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

使用什么而不是角度范围功能？

3 个答案: