AngularJS控制器和方法

Ram*_*feh 22 javascript angularjs

我是angularjs的初学者,有一些关于控制器的问题.
这是我的示例控制器:

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

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

   $scope.secondMethod = function()
   {
      this.firstMethod();
   };
};
Run Code Online (Sandbox Code Playgroud)

这是我的问题:

  • 我怎么能叫firstMethodsecondMethod?我的方式是正确的,还是更好的方式?
  • 我如何为控制器创建构造函数?我需要调用调用初始化sampleArray的firstMethod的secondMethod?
  • 如何从html代码调用特定方法?我发现ng-initialize但我无法弄清楚如何使用它.

Jos*_*ler 32

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

$scope.secondMethod = function() {
  $scope.firstMethod();
};
Run Code Online (Sandbox Code Playgroud)

您也可以从HTML调用,如下所示:

<span>{{secondMethod()}}</span>
Run Code Online (Sandbox Code Playgroud)

但控制器实际上没有"构造函数" - 它们通常像函数一样使用.但是你可以在控制器函数中放置初始化,它最初会被执行,就像构造函数一样:

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

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

  $scope.firstMethod();
}
Run Code Online (Sandbox Code Playgroud)


Chr*_*all 7

你通过使用$ scope调用第一个方法.

所以

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };
Run Code Online (Sandbox Code Playgroud)

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

对于您的第三个问题,您可以让方法在控制器上自动运行"onload",或者通过前端角度绑定运行它.

例如 自动运行

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

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

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


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

};
Run Code Online (Sandbox Code Playgroud)

运行绑定

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

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

</div>
Run Code Online (Sandbox Code Playgroud)


Mar*_*cok 7

@Josh和@Christopher已经涵盖了你的问题,所以我不再重复了.

我发现ng-initialize但我不知道如何使用:-(

该指令实际上是ng-init.有时(例如,如果您开始在应用程序的某些部分中使用Angular,并且仍需要动态生成视图/ HTML页面服务器端),则ng-init有时可以是初始化某些内容的有用方法.例如,

<div ng-controller="ExampleCtrl">
   <form name="myForm">
     <input type="text" ng-model="folder" ng-init="folder='Bob'">
Run Code Online (Sandbox Code Playgroud)

这是一个例子,有人需要使用ng-init:rails + angularjs在编辑时将值加载到文本字段中

我还想提一下控制器不是单身人士.如果使用ng-view,则每次转到其他路径时,都会创建一个新控制器.与您要离开的视图关联的控制器将被销毁,并且与您要访问的视图关联的控制器将被执行.因此,当应用程序运行时,控制器中的"初始化代码"可能会被执行多次.例如,如果您访问某个页面,转到其他地方,然后返回,相同的控制器功能(及其"初始化代码")将被执行两次.

如果你想要真正运行一次,可以将它放在服务中或模块的config()或run()方法中.(服务是单例,因此每个服务只实例化一次,因此服务中的初始化代码只运行一次.)