使用$scope可以吗?函数名还是应该使用var functionName = function() ?

I've been working on an Angular App and in my controllers I have been using $scope to create my functions ex:

我一直在开发一个有棱角的应用程序，在我的控制器中，我一直在使用$scope创建我的功能:

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

Should I use

我应该使用

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

instead?

而不是?

I am still learning Javascript and Angular 1.x and would like to understand the best practices!

我还在学习Javascript和角1。并希望了解最佳实践!

7 个解决方案

#1

$scope.getJobs() is now available in $scope object and is accessible to your view.

$scope. getjobs()现在在$scope对象中可用，您的视图可以访问它。

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

This is a private function which you can use it in your controller, but won't be availble to your view.

这是一个私有函数，您可以在控制器中使用它，但不能用于视图。

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

The best case is if you want to use/call the function in your view, attach the function/variable to $scope else just go with plain old way of function declaration or expression.

最好的情况是，如果您希望在视图中使用/调用函数，请将函数/变量附加到$scope，否则只需使用简单的函数声明或表达式的老方法。

Note: Angular triggers a digest cycle for checking on variables. Modifying a variable/function which you are not using in your view may cause extra digest cycles which can impact your performance.

注意:角触发一个检查变量的摘要周期。修改视图中没有使用的变量/函数可能会导致额外的摘要周期，从而影响性能。

#2

I would strongly recommend using the controllerAs instead. That way you bind your controller do a specific object in the scope. Then you don't have to worry about overwriting that scope.

我强烈建议使用controllerAs。通过这种方式，您将控制器绑定到范围内的特定对象。这样你就不用担心覆盖范围了。

Bad:

缺点:

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

Good:

好:

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

For the controller code that would lead to not having to inject $scope for setting variables. Instead bind to the controllers this:

对于将导致不必为设置变量注入$scope的控制器代码。而是与控制器绑定:

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

Read the https://johnpapa.net/angular-style-guide/ for more information on best practices :)

阅读https://johnpapa.net/angular-style-guide/获取关于最佳实践的更多信息:

#3

Depends on what you are trying to accomplish.

这取决于你想要完成什么。

In case of a private function:

如有私人用途:

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

It wont be accessible from the View. This function will only be available for the controller.

从景观上看不出它来。此函数仅对控制器可用。

And, in case you want to expose the function to the View, you must add the function to the $scope

而且，如果要将函数公开给视图，必须将函数添加到$scope

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

In this case you will be able to to call it from the corresponding html file.

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

#4

Best practice is to use ControllerAs syntax:

最佳实践是使用ControllerAs语法:

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

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

And in your view:

在你的观点:

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

For more information on this best practice (and a lot of others), have a look at Jon Papa's styleguide: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y030

关于这个最佳实践的更多信息(以及许多其他的)，请看Jon Papa的styleguide: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y030

#5

It depends if you want to make the function accessible in your HTML template. Suppose you had a controller like this:

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

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

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

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

Then you could do this:

然后你可以这样做:

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

But you could not do this:

但你不能这么做:

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

By making the myAlert function a property of $scope, it makes the function available to all of the elements within that $scope.

通过将alert myAlert函数设置为$scope属性，它使该函数对该$scope中的所有元素都可用。

#6

It depends whether you use controller vs controllerAs syntax.

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

Let's assume you have this controller:

假设你有这个控制器

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

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

If you use controller you have to add those functions to scope to be accessible from UI.

如果您使用控制器，您必须将这些函数添加到可以从UI访问的范围。

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

Now this will work nice and alert will show.

现在这个会运行得很好，警报也会显示出来。

However if you use controllerAs syntax you can just use this. and add your methods to your this inside controller.

但是，如果您使用controllerAs语法，您可以使用它。将你的方法添加到这个内部控制器中。

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

    var vm = this;

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

Now in your html you have to use this:

在html中，你必须使用:

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

#7

If you're looking for best practices in general, John Papa's style guide is pretty much the holy grail of angular best practices. It addresses this question exactly as well. You should give it a read!

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

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

#1