Question

我一直在研究Angular App，在我的控制器中，我一直在使用$ scope创建我的函数ex：

$scope.getJobs = function(){
 //code here
};

我应该使用

var getJobs = function(){
// code here
};

代替？

我还在学习Javascript和Angular 1.x，并希望了解最佳实践！

Answer 1

我强烈建议您使用controllerAs。这样，绑定控制器就可以在范围内执行特定对象。然后你不必担心覆盖这个范围。

为：

<div ng-controller="myCtrl">
  {{someVar}}
  <div ng-controller="myOtherCtrl">
    {{someVar}}
  </div>
</div>

好：

<div ng-controller="myCtrl as my">
  {{my.someVar}}
  <div ng-controller="myOtherCtrl as myOther">
    {{myOther.someVar}}
  </div>
</div>

对于导致无需注入$scope来设置变量的控制器代码。而是绑定到控制器this：

function myCtrl() {
  var vm = this;
  vm.getJobs = function() {...};
}

阅读https://johnpapa.net/angular-style-guide/以获取有关最佳做法的更多信息：）

Answer 2

$ scope.getJobs（）现在可在$scope对象中使用，您的视图可以访问。

$scope.getJobs = function(){
 //code here
};

这是一个private功能，您可以在controller中使用它，但不能使用您的视图。

var getJobs = function(){
// code here
};

最好的情况是，如果你想在视图中使用/调用函数，将函数/变量附加到$ scope，只需使用function declaration or expression.

的简单方法

注意： Angular会触发digest cycle来检查变量。修改视图中未使用的变量/函数可能会导致额外的摘要周期，从而影响您的性能。

Answer 3

取决于你想要完成的任务。

如果是私人功能：

var getJobs = function(){
// code here
};

无法从View访问。此功能仅适用于控制器。

并且，如果您想要将该函数公开给View，您必须将该函数添加到$ scope

$scope.getJobs = function(){
 //code here
};

在这种情况下，您可以从相应的html文件中调用它。

Answer 4

最佳做法是使用ControllerAs语法：

angular
    .module('app')
    .controller('MyController', MyController);

function MyController() {
    var vm = this;
    vm.variable= 'text';
    vm.getJobs = function() { };
}

在你看来：

<div ng-controller="MyController as MyCtrl">
    <div ng-click="MyCtrl.getJobs()">{{ MyCtrl.variable}}</div>
</div>

有关此最佳实践（以及其他许多实践）的更多信息，请查看Jon Papa的风格指南： https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y030

Answer 5

这取决于您是否希望在HTML模板中访问该功能。假设你有一个像这样的控制器：

app.controller('MyController', ['$scope', function($scope) {

    $scope.myAlert = function(){
        window.alert('foo');
    };

    var myConsole = function(){
        console.log('bar');
    }
}]);

然后你可以这样做：

<div ng-controller="MyController" ng-init="myAlert()"></div>

但你不能这样做：

<div ng-controller="MyController" ng-init="myConsole()"></div>

通过使myAlert函数成为$ scope的属性，它使该函数可用于该$ scope中的所有元素。

Answer 6

这取决于您是使用controller vs controllerAs语法。

我们假设你有这个控制器：

app.controller('MyController', function() {

    $scope.alert = function(input) {
      alert(input);
    };    
});

如果使用控制器，则必须将这些功能添加到可从UI访问的范围。

<div ng-controller="MyController" ng-click="alert('hello')"></div>

现在这将很好用，并且会显示警报。

但是，如果您使用controllerAs语法，则可以使用this.并将您的方法添加到控制器内的this。

app.controller('MyController', function() {

    var vm = this;

    vm.alert = function(input) {
      alert(input);
    };    
});

现在你的html中你必须使用它：

<div ng-controller="MyController as vm" ng-click="vm.alert('hello')"></div>

Answer 7

如果您正在寻找一般的最佳实践，John Papa的风格指南几乎是角度最佳实践的圣杯。它也完全解决了这个问题。你应该读一读！

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

是否可以使用$ scope.functionName或者我应该使用var functionName = function（）？

7 个答案: