Question

我在页面加载时调用函数时遇到问题。我不确定在html中我应该使用什么标签来运行Angular应用程序。

我正在尝试从数据库中提取用户数据并将其显示在表格中。当我使用按钮调用该功能时，它可以工作，但我希望它更加自动化。我做了一些研究，它总是让我使用控制器，但我相信必须有一个更简单的解决方案。

<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>

这是Angular代码。它向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

您可以使用ng-init将其称为this post中建议的haakon319。否则，您可以在函数定义后在控制器中调用它，它将在控制器加载时运行：

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();

}

或者，您可以使用以下命令将init添加到作用域：

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

并按以下方式添加到您的HTML中：

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

然后在加载带有该html的路径时运行。

在页面Load上运行Angular脚本

1 个答案: