ページロード時に角度スクリプトを実行する

Question

ページが読み込まれたときに関数を呼び出すときに問題があります。 Angularアプリケーションを実行するためにhtml内でどのタグを使用すべきかわかりません。

データベースからユーザーデータを取得し、テーブルに表示しようとしています。関数を呼び出すためにボタンを使用すると機能しますが、より自動化したいと考えています。私はいくつかの研究を行いましたが、それは常にコントローラを使用するように私につながりますが、もっと簡単な解決策が必要だと確信しています。

<tbody> 
    <Button ng-click="fetchEveryone();">click</Button> 
     <tr ng-repeat="user in all_users"> 
      <td> 
       <img src="/images/{{user.pic}}" style="height: 50px; width: 50px; border-radius: 100px;"/> 
      </td> 
      <td>{{user.name}}</td> 
      <td>{{user.email}}</td> 
      <td> 
       <select ng-change="" ng-model="selectedMeeting"> 
         <option value="">Select Meeting Type...</option> 
         <option ng-repeat="meeting in meetings">{{meeting}}</option> 
       </select> 
      </td> 
      <td> 
       <button>request</button> 
      </td> 
     </tr> 
</tbody> 

ここには角度コードがあります。これは、Pythonサーバーに要求を行います。

$scope.fetchEveryone = function(){ 
     var req = { 
      verb: 'getPeople', 
      names: $scope.Allusers 
     } 

     $scope.callAPI(req, function(response){ 
      $scope.all_users = response; 
      $scope.view = 'viewPerson' 
     }); 
} 

Answer 1

haakon319がthis postで示唆されているようにあなたはNG-INIT使用してそれを呼び出すことができます。そうしないと、関数定義の後に、あなたのコントローラでそれを呼び出すことができますし、それがコントローラ負荷時に実行されます：あなたが起こる必要がある一つのこと以上のものを持っている場合

function myController($scope){ 
    $scope.callAPI = function(req, callback){ 
     //some function 
    }; 

    $scope.fetchEveryone = function(){ 
     var req = { 
      verb: 'getPeople', 
      names: $scope.Allusers 
     } 

     $scope.callAPI(req, function(response){ 
      $scope.all_users = response; 
      $scope.view = 'viewPerson' 
     }); 
    }; 

    $scope.fetchEveryone(); 

} 

、より良い練習は、専用のinitを持っているかもしれません

function myController($scope){ 
    $scope.callAPI = function(req, callback){ 
     //some function 
    }; 

    $scope.fetchEveryone = function(){ 
     var req = { 
      verb: 'getPeople', 
      names: $scope.Allusers 
     } 

     $scope.callAPI(req, function(response){ 
      $scope.all_users = response; 
      $scope.view = 'viewPerson' 
     }); 
    }; 

    function moreBackendCalls(){ 
     //more backend calls 
    }; 

    function init(){ 

     $scope.fetchEveryone(); 
     moreBackendCalls(); 

     //init some variables 
     $scope.test1 = 'new test'; 
     $scope.test2 = 73; 

    } 

    init(); 

} 

また、あなたがスコープに初期化を追加することができます：

$scope.init = function(){ 
    ..... 
} 

と、次の方法であなたのHTMLに追加します。必要なすべての機能を呼び出す関数

<tbody ng-init="init()"> 
    ....... 
</tbody> 

このhtmlのルートがロードされたときに実行されます。