如何在頁面加載時使用angularjs從控制器調用html中的兩種方法或函數

Question

我是angularjs的新手，我試圖在頁面加載時顯示兩個函數值。

我只能加載一個函數。 當我嘗試加載兩個方法只加載第一個init方法。

然後我試圖聲明一個共同的功能「數據-NG-的init =」 initializeMethods（）」中的HTML，但我沒能獲得任何價值。

我html頁面

我使用普通的init函數名爲「data-ng-init =」initializeMethods（）「。

<div class="container-fluid text-center" ng-controller="UserDataController as ctrl" data-ng-init="initializeMethods()"> 

    <div class="row content"> 
      <div class="col-sm-2 sidenav"> 
     <div class="well well-lg col-xs-30" style="background-color: green;" ng-show="true"> 

     <img class="img-responsive" style="padding-bottom:10px;" src="css/images/image.jpg" /> 
     <div class="form-group"> 
      <select class="form-control" ng-model="model.selectedValue" name="groupzname"> 
       <option ng-repeat="item in model.dropDownData track by $index" value="{{item}}">{{item}}</option> 
        </select> 
        </div> 
       </div> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span>Dashboard</a> 
     </li> 
     <li class="#/Profile"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span>Profile</a> 
     </li> 
     <li><a href="#/Account"><span class="glyphicon glyphicon-edit vmenu"></span>Account</a> 
     </li> 
     <li><a href="#/Dropbox"><span class="glyphicon glyphicon-tags vmenu"></span>Dropbox</a> 
     </li> 
     <li><a href="#/Checklist"><span class="glyphicon glyphicon-off vmenu"></span>Checklist</a> 
     </li> 
     <li><a href="#/Report"><span class="glyphicon glyphicon-off vmenu"></span>Report</a> 
     </li> 
     <li><a href="#/Settings"><span class="glyphicon glyphicon-off vmenu"></span>Settings</a> 
     </li> 
     <li><a href="#/Help"><span class="glyphicon glyphicon-off vmenu"></span>Help</a> 
     </li> 
    </ul> 

    </div> 
    </div> 


    <div class="col-sm-8 text-left" ng-show="true"> 
     <h1>Welcome</h1> 
     <div class="form-group"> 
      <label class="form-control" ng-model="model.membervalue" name="membername" style="border:none"> {{model.membervalue}}</label> 
     </div> 
</div> 
</div> 


     <div class="col-sm-4"> 
     <div class="panel panel-primary"> 
     <div class="panel-heading"><img src="css/images/Birthday.png" />BIRTHDAYS TODAY</div> 
     <div class="panel-body"> 

     <ul> 
     <li ng-repeat="data in displayBirthdays">{{data}}</li> 
      </ul> 
      </div> 
       </div> 

我控制器

這裏的共同作用「$ scope.initializeMethods =函數（）{」其中包含在其兩個不同的功能是「$ scope.getDisplayList =（）的函數{」和「$ scope.Birthdays =函數（數據）{」

$scope.initializeMethods = function(){ 

    $scope.getDisplayList = function(){ 

     $scope.model.dropDownData = []; 
     console.log(displaynames); 
     for(var i=0; i<displaynames.length; i++) 
      { 
      $scope.model.dropDownData.push(displaynames[i].groupzname + " - "+displaynames[i].membername + " - "+displaynames[i].membercode); // we can itterate and set the drop down values 

      console.log($scope.model.dropDownData); 
      $scope.model.selectedValue =displaynames[i].groupzname + " - "+displaynames[i].membername + " - "+displaynames[i].membercode; // set model value 

     $scope.model.memberName = displaynames[i].membername; 

     } 
      $window.localStorage.x = $scope.model.dropDownData; //setting data in cookies 

    } 


     $scope.Birthdays = function(data){ 

      var current_date = moment().format('YYYY-MM-DD'); 
      var date_time = current_date + " 00:00:00"; 
      var json = { 
       "json": { 
        "request": { 
         "servicetype": "21", 
         "functiontype": "2021", 
         "memberid": $rootScope.displayList[0].memberid, 
         "groupzcode": $rootScope.displayList[0].groupzcode, 
         "date":date_time, 
         "country": [ 
          "India" 
         ], 
         "state": [ 
          "_ALL" 
         ], 
         "city": [ 
          "_ALL" 
         ], 
         "segment": [ 
          "_ALL" 
         ],  
         "groupzlist":[ 
         $rootScope.displayList[0].groupzcode 
         ], "session_id":$rootScope.displayList[0].session_id, 
        } 
       } 
      } 

     UserService.Birthdays(json).then(function(response){ 
       //callback(response); 
      var show_birthdays = []; 

       console.log("displayBirthdays"); 
       if (response.json.response.statuscode != 0 && response.json.response.statusmessage !='Success') { 
        show_birthdays = response.json.response.statusmessage; 
        console.log("show_birthdays "+show_birthdays); 

       }else { 
         console.log("Greeting response: "+response); 
        var resp = response; 
        var greetings = resp.json.response.greetings; 
        console.log(greetings); 
        console.log(show_birthdays); 
        } 
      }); 
     } 
    } 

任何人都可以告訴我如何在頁面加載時顯示這兩個函數值。

在此先感謝。

Answer 1

這是寫在ES6中，但你得到的主旨。

export default class MyController { 
    constructor() { 
    super(arguments); 

    this.MakeInitCall(); 
    } 

    MakeInitCall() { 
    // Your initialisation code here, gets called on controller (page) start; 
    this.getDisplayList(); 
    this.Birthdays(data); 
    } 

    getDisplayList() { 
    $scope.whatevervariable = 'foo'; 
    } 

    Birthdays(data) { 
    $scope.anothervariable = 'bar'; 
    } 
} 

你可以重寫爲ES5等，

Answer 2

其實你initializeMethods功能只需要聲明你getDisplayList和生日等功能。如果您在initializeMethods結束調用他們兩個，它應該工作：

$scope.initializeMethods = function(){ 
    $scope.getDisplayList = function(){...} 
    $scope.Birthdays = function(){...} 

    $scope.getDisplayList(); 
    $scope.Birthdays(); 
} 

Answer 3

控制器：

$scope.initializeMethods = initializeMethods; 
$scope.getDisplayList = getDisplayList; 
$scope.birthdays = birthdays; 

// Init function when page load 
$scope.initializeMethods(); 

function initializeMethods() { 
    $scope.getDisplayList(); 
    $scope.birthdays(); 
} 

function getDisplayList() { 
    // something 
} 

function birthdays() { 
    // something 
}