Javascript AngularJS 控制器和方法

AngularJS controller and methods

提问by Ramzy Abourafeh

I'm a beginner in angularjs with a few questions about controllers.
Here's my example controller:

我是 angularjs 的初学者，有一些关于控制器的问题。
这是我的示例控制器：

function exampleController($scope)
{
   $scope.sampleArray = new Array();

   $scope.firstMethod = function()
   {
      //initialize the sampleArray
   };

   $scope.secondMethod = function()
   {
      this.firstMethod();
   };
};

Here are my questions:

以下是我的问题：

• How I can call firstMethodfrom secondMethod? Is the way I did it correct, or is better way?
• How I can create a constructor for the controller? I need to call the secondMethod that call the firstMethod that initialize the sampleArray?
• How I can call a specific method from html code? I found ng-initialize but I can't figure out how to use it.

• 我怎么能叫firstMethod的secondMethod？我的方法是正确的，还是更好的方法？
• 如何为控制器创建构造函数？我需要调用调用初始化 sampleArray 的 firstMethod 的 secondMethod 吗？
• 如何从 html 代码调用特定方法？我找到了 ng-initialize，但我不知道如何使用它。

回答by Josh David Miller

You call a method the same way you declared it:

您以与声明方法相同的方式调用方法：

$scope.secondMethod = function() {
  $scope.firstMethod();
};

Which you can also call from HTML like so:

您也可以像这样从 HTML 调用：

<span>{{secondMethod()}}</span>

But controllers don't really have "constructors" - they're typically used just like functions. But you can place initialization in your controller function and it will be executed initially, like a constructor:

但是控制器并没有真正的“构造函数”——它们通常像函数一样使用。但是你可以将初始化放在你的控制器函数中，它会像一个构造函数一样最初被执行：

function exampleController($scope) {
  $scope.firstMethod = function() {
    //initialize the sampleArray
  };

  $scope.secondMethod = function() {
    $scope.firstMethod();
  };

  $scope.firstMethod();
}

回答by Christopher Marshall

you call the first method by using $scope.

您使用 $scope 调用第一个方法。

So

所以

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };

Not really sure what you mean in your second question.

不太确定你在第二个问题中的意思。

For your third quesiton, you can either have the method run automatically "onload" on controller, OR run it via an front-end angular binding.

对于您的第三个问题，您可以让该方法在控制器上自动“加载”运行，或者通过前端角度绑定运行它。

e.g. Run Automatically

例如 自动运行

function exampleController($scope)
{
   $scope.sampleArray = new Array();

   $scope.firstMethod = function()
   {
      //initialize the sampleArray
   };

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };


   $scope.secondMethod(); // runs automatically.

};

Run on binding

绑定时运行

<div ng-controller="ExampleController"> <!-- example controller set up in namespace -->

<button class="btn" ng-click="secondMethod()">Run Second Method</button>

</div>

回答by Mark Rajcok

@Josh and @Christopher already covered your questions, so I won't repeat that.

@Josh 和 @Christopher 已经涵盖了您的问题，所以我不会重复。

I found ng-initialize but I can't know how to use that :-(

我找到了 ng-initialize，但我不知道如何使用它 :-(

The directive is actually ng-init. Sometimes (e.g., if you are starting to use Angular in parts of an application and you still need to dynamically generate a view/HTML page server-side), ng-init can sometimes a useful way to initialize something. E.g.,

该指令实际上是ng-init。有时（例如，如果您开始在应用程序的某些部分使用 Angular，并且您仍然需要在服务器端动态生成视图/HTML 页面），ng-init 有时是一种有用的初始化方法。例如，

<div ng-controller="ExampleCtrl">
   <form name="myForm">
     <input type="text" ng-model="folder" ng-init="folder='Bob'">

Here's an example where someone needed to use ng-init: rails + angularjs loading values into textfields on edit

这是一个需要使用 ng-init 的示例：rails + angularjs 在编辑时将值加载到文本字段中

I'd also like to mention that controllers are not singletons. If you use ng-view, each time you go to a different route, a new controller is created. The controller associated with the view you are leaving is destroyed, and the controller associated with the view you are going to is executed. So that "initialization code" in a controller could get executed multiple times while an app is running. E.g, if you visit a page, go elsewhere, then come back, the same controller function (and its "initialization code") would be executed twice.

我还想提一下，控制器不是单身人士。如果你使用 ng-view，每次你去不同的路由时，都会创建一个新的控制器。与您将要离开的视图关联的控制器被销毁，而与您将要访问的视图关联的控制器将被执行。因此，当应用程序运行时，控制器中的“初始化代码”可以多次执行。例如，如果您访问一个页面，转到其他地方，然后返回，则相同的控制器函数（及其“初始化代码”）将被执行两次。

If you want something to truly run once, put it in a service or in a module's config() or run() methods. (Services are singletons, and hence each service is instantiated only once, so initialization code in a service is only run once.)

如果您希望某些东西真正运行一次，请将其放入服务或模块的 config() 或 run() 方法中。（服务是单例的，因此每个服务只被实例化一次，所以服务中的初始化代码只运行一次。）