【问题标题】:Calling a init function when a directive is loaded加载指令时调用 init 函数
【发布时间】:2016-01-25 08:33:57
【问题描述】:

我有一个从服务加载 cmets 的简单指令(commentsService):

'use strict';

angular.module('mean.rank')
    .directive('commentList', function(CommentsService, Global) {
        return {
            restrict: 'E',
            templateUrl:  'rank/views/comments-list.html',
            replace: false,
            link: function($scope, element, attrs) {
                //accessing the ad info :  console.log("ADD  " , $scope.ad);
                $scope.comments = [];

                $scope.loadComments = function () {
                    console.log("in loadComments");
                    var adID = {};
                    adID.ad_ID = $scope.ad.nid;
                    console.log("calling services.getComments function with  " , adID.ad_ID);
                    CommentsService.getComments(adID.ad_ID)
                        .then(function (response) {
                            angular.forEach(comment in response)
                            $scope.comments.push(comment);
                        });


                };


            }
        }
    })

加载的 cmets 应该使用 ng-init 加载到列表(在 templateUrl 内),然后是加载服务(如果需要,我将添加代码)。

<div ng-init="loadComments()">
    <ul class="media-list comment-detail-list" >
        <li class="media" ng-repeat="comment in comments" >
            <article>
                <div class="pull-left comment-info">
                    <a href="#" class="author">{{ comment.author }}</a><br />
                    <time>{{ comment.datePublished | date:"MM/dd/yyyy" }}</time>
                </div>
                <div class="media-body">
                    <div class="comment-body">
                        <p>{{ comment.comment }}</p>
                    </div>
                </div>
            </article>
        </li>
        <li>Debugger</li>
    </ul>
</div>

该指令在其范围内具有loadCommets() 函数,但它未被触发。 感谢您的帮助!

【问题讨论】:

    标签: javascript html angularjs html-parsing angularjs-ng-init


    【解决方案1】:

    我建议将函数调用放在链接函数本身而不是 ng-init 中。

    angular.module('mean.rank')
        .directive('commentList', function(CommentsService, Global) {
            return {
                ...
                link: function($scope, element, attrs) {
                    //accessing the ad info :  console.log("ADD  " , $scope.ad);
                    $scope.comments = [];
    
                    $scope.loadComments = function () {
                        ...
                    };
    
                    $scope.loadComments();
                }
            }
        })
    

    编辑:顺便说一下,你的 forEach 语法是错误的。应该是

    angular.forEach(response, function(comment){
        $scope.comments.push(comment);
    });
    

    【讨论】:

    • 有效!但它会在列表显示给用户之前初始化 $scope.cmets 数组吗?
    • 在典型的基于 ajax 的视图中,您始终可以假设 UI 会在数据之前加载。如果您想在加载数据之前隐藏视图的某些部分,则需要使用 ng-show/ng-hide 直到数据可用。
    猜你喜欢
    • 2020-06-07
    • 2015-05-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-04-07
    • 1970-01-01
    • 1970-01-01
    • 2010-11-21
    相关资源
    最近更新 更多