如何使用angularjs在页面加载时从控制器调用html中的两个方法或函数

Question

我是 angularjs 新手，我正在尝试在页面加载时显示两个函数值。

我只能加载一个函数。 当我尝试加载两个方法时，只有第一个 init 方法正在加载。

然后我尝试在 html 中声明一个通用函数 "data-ng-init="initializeMethods()" 但我无法获得任何值。

我的html页面

我使用常见的初始化函数名称为 "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 = function(){" 包含两个不同的函数是 "$scope.getDisplayList = function(){" 和 "$scope.Birthdays = function(data){"

   $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 和 Birthdays 函数。如果您在 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
}