Angularjs run directive after scope has loaded with $http data

Question

I need to run a directive that runs a jPager jquery plugin after an http call has loaded the

elements to the DOM.

The jquery is working fine, but I cannot get the directive to run after the screen is rendered (it just runs before and therefore the scope is empty)

I have tried using $emit and $broadcast demo's but still cant get it to fire.

The scope loads

tags into the itemContainer, The jQuery then pages the data.

<div wss-pager class="holder"></div>
        <ul id="itemContainer" ng-bind-html="ctData"></ul>

////

function loadData() {
                $http({
                        method: 'GET',
                        url: 'api/getMyData',

                    }).
                    success(function(data, status, headers, config) {
                        // deferred.resolve(data);
                        $scope.ctData = data.m_StringValue;
                    //    
                        $scope.$emit('UpdateJPages');
                    }).
                    error(function(data, status, headers, config) {
                        alert("error" + data);
                        $scope.ctData= "";
                    });

            };

/////////

  angular.module('app').directive("wssPager", [function () {
            return {
                restrict: "A",
                link: function (scope, elem, attrs) {
                    scope.$on('UpdateJPages', function() {

                        $("div.holder").jPages({
                            containerID: "itemContainer",
                            perPage: 5,
                            startPage: 1,
                            startRange: 1,
                            midRange: 5,
                            endRange: 1
                        });


 });

seyisulu · Accepted Answer · 2016-09-29 11:33:28Z

5

Use ng-if if the cData is empty before this call use like this:

<div wss-pager class="holder" ng-if="ctData"></div>

If not you can have one extra var e.g. loaded

<div wss-pager class="holder" ng-if="loaded"></div>
function loadData() {
    $scope.loaded = false;
    $http({
        method: 'GET',
        url: 'api/getMyData'
    })
    .success(function(data, status, headers, config) {
        // deferred.resolve(data);
        $scope.ctData = data.m_StringValue;
        $scope.loaded = true
        $scope.$emit('UpdateJPages');
    })
    .error(function(data, status, headers, config) {
        alert('error' + data);
        $scope.ctData= '';
    });
};

edited Sep 29, 2016 at 11:33

seyisulu

4656 silver badges13 bronze badges

answered Aug 15, 2014 at 10:42

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maduka Jayalath Over a year ago

This is a simple and clean solution

seyisulu Over a year ago

This is a much elegant solution than $scope.$watching or using $timeout as the data may fail to load before the timeout runs.

Mark · Accepted Answer · 2014-08-15 15:44:31Z

1

Ok i have found a work around for anyone interested. May not be the best answer but it has solved the issue.

I have used the $timeout function to enable screen to be rendered.

 $timeout(function () {
       $scope.$emit('UpdateJPages');
         });

answered Aug 15, 2014 at 15:44

Mark

835 bronze badges

Collectives™ on Stack Overflow

Angularjs run directive after scope has loaded with $http data

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related