I have a simple directive that loads ments from a service(mentsService):

'use strict';

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

                $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(ment in response)
                            $scopements.push(ment);
                        });


                };


            }
        }
    })

The loaded ments should be loaded to the list(inside the templateUrl) using ng-init and then the service for loading (I will add the code if needed).

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

The directive has in its scope the loadCommets() function but it is not triggered. Thank's for your help!

I have a simple directive that loads ments from a service(mentsService):

'use strict';

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

                $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(ment in response)
                            $scope.ments.push(ment);
                        });


                };


            }
        }
    })

The loaded ments should be loaded to the list(inside the templateUrl) using ng-init and then the service for loading (I will add the code if needed).

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

The directive has in its scope the loadCommets() function but it is not triggered. Thank's for your help!

• javascript
• html
• angularjs
• html-parsing
• angularjs-ng-init

1 Answer 1

I'd suggest putting the function call inside the link function itself instead of ng-init.

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

                $scope.loadComments = function () {
                    ...
                };

                $scope.loadComments();
            }
        }
    })

Edit: by the way your forEach syntax is wrong. It should be

angular.forEach(response, function(ment){
    $scope.ments.push(ment);
});