Question

如果我想在用户访问此页面时运行一个函数，我只想知道AngularJS的最佳实践。

所以举个例子。我有这个网址 http://localhost:3000/post/58fc0449a467230cb003151d 它将显示具有该ID的帖子。因此，我在页面上显示的方式是使用ng-init =“function（）”，这样每次用户进入此页面时，它将首先初始化函数，即函数调用后端并返回我需要的数据。

所以我的问题是，这是最好的方法/做法吗？使用ng-init调用函数然后将数据显示给视图？

**更新

感谢您的回答！顺便说一下，我使用一个控制器，我的功能驻留在控制器上。我会在这里粘贴我的代码.. 此处的代码显示了从数据库中检索的用户的消息

Messages.htm

<div ng-controller="MessageController as mc" ng-init="messageGet()" class="container" style="height: 90vh">
<h1>Messages</h1>
<div class="row">
    <div class="col-md-12">
        <ul class="media-list" ng-repeat="messages in theMessages">
            <a href="#"> 
                <li class="media card-1">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="/public/images/matt.jpg" alt="avatar">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading" ng-if="messages.user1 !== username">{{messages.user1}}</h5>
                        <h5 class="media-heading" ng-if="messages.user2 !== username">{{messages.user2}}</h5>
                        <strong>Topic: </strong>{{messages.postname}}
                        <h5><strong>{{messages.recentmessage.sender}}</strong>: {{messages.recentmessage.message}}  </h5>
                        <div>
                        <a href="/messages/{{messages._id}}" class="btn btn-info" style="margin-bottom: 10px">View message</a>
                        </div>
                    </div>
                </li>
                </a>
        </ul>
    </div>

MessageController

var app = angular.module('main');

app.controller('MessageController', ['$rootScope','MessageService', '$scope', '$localStorage', 'mySocket', '$location', '$stateParams', function($rootScope, MessageService, $scope, $localStorage, mySocket, $location, $stateParams){
   $scope.currentUrl = $location.$$path;   
   var vm = this;

    $scope.messageGet = function(){
        var result = MessageService.getMessages()
            .then(function(result){
                $scope.theMessages = $localStorage.messages;
                $scope.username= $localStorage.username;
            });
    };

MessageService

var app = angular.module('main');

app.service('MessageService', ['$http', '$localStorage', function($http, $localStorage){

    var vm = this;

    vm.getMessages = function(){
        var getmessage = {
            method: 'POST',
            url: '/api/getmessages',
            dataType: 'json',
            contentType: 'application/json',
            data: {
                userid: $localStorage.userid
            }
        };

        return $http(getmessage)
            .then(function(response){
                $localStorage.messages = response.data.info;
                return true;
            });
    };

正如您所看到的，当我转到URL localhost:3000/messages时，它将加载Messages.htm模板然后我将运行函数“messageGet（）”因为我需要从数据库获取消息然后在我的视图上显示它。如果我不使用ng-init，那么当用户访问此特定网址时，我将如何运行该功能？

第二次更新

所以我试图摆脱ng-init函数，我使用了一个立即调用的函数

MessageController

(function messageGet (){
    console.log('Messaged run!');
    var result = MessageService.getMessages()
        .then(function(result){
            $scope.theMessages = $localStorage.messages;
            $scope.username= $localStorage.username;
        });
})();

因此，每次加载Message.htm时，都会运行此函数。

我的问题是，这会吗？而不是ng-init？

谢谢！

Answer 1

正如@georgeawg所说，你应该使用指定的控制器进行这种行动如果您使用角度版本＆gt; = 1.5，则应使用控制器属性$ onInit 阅读有关角度分量及其生命周期here的更多信息。

如果您使用的是旧版本，则可以执行以下操作：

function MyController() {
     function init() {
     //enter init code here
     }

     init();
}

您可以详细了解here。

Answer 2

即时使用ng-init="function()"，以便每次用户访问此页面时，它都会首先初始化该功能

不建议使用ng-init。使用控制器。

来自文档：

ngInit

可以滥用此指令将不必要的逻辑量添加到模板中。 ngInit只有少数适当用途，例如，如{this demo]所示，对ngRepeat的特殊属性进行别名处理;并通过服务器端脚本注入数据。除了这几种情况，您应该使用controllers而不是ngInit来初始化范围上的值。

— AngularJS ngInit Directive API Reference

AngularJS在另一个页面上访问时运行一个函数

2 个答案:

ngInit