Angularjs Directory data executed before service called from controller

Question

Hi I was working with angular directive and i have created one...

  app.directive('customtable', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs) {
            var html = '<table>';
            angular.forEach(scope[attrs.rows], function (row, index) {
                //html += '<tr><td>' + row.A+ '</td></tr>';
                html += '<tr><td>' + row.B+ '</td>' +
                '<td>' + row.C+ '</td>' +
                '<td>' + row.D+ '</td>' +
                '<td>' + row.E+ '</td>' +
                '<td>' + row.F+ '</td>' +
                '<td>' + row.G+ '</td>' +
                '<td>' + row.H+ '</td></tr>';
                if (index == 4) {
                    html += '<tr><td>' + 'Click Here to See All' + '</td></tr>';
                }
            })
            html += '</table>';
            element.replaceWith(html)
        }
    }
});

I am calling this directive from :

<table>
<tr customtable ng-model="data" rows="data" ng-hide="hideRows && $index > 4 && $index < (myArray.length - 5)">

</tr>
</table>

factory method :

dataFactory.getdate().success($scope.handleSuccess).then(function (result)   {
    $scope.data= result.data;
});

Here issue is As my scope variable $scope.data is getting set from factory method. first my directive code is getting executed and then the factory service gets called. so I am getting data variable undefined in directive code. any help and suggestions are most welcome. I am kind of stuck.

If you don't want isolated scope, you will probably have to watch the scope property and first check if it is defined. — Davin Tryon
– Davin Tryon, Commented Jan 18, 2014 at 10:57
do you mean i should watch scope property inside directive and what does it makes difference. I have less idea about watch property. — Samir Shah
– Samir Shah, Commented Jan 18, 2014 at 11:01
By using attrs.rows you are only seeing the text value "data". In the directive you don't have a two-way bind with the scope property. — Davin Tryon
– Davin Tryon, Commented Jan 18, 2014 at 11:02
@DavinTryon can you please elaborate more. I am not getting anything. sorry to bother you again. — Samir Shah
– Samir Shah, Commented Jan 18, 2014 at 11:18
for some background, why are you replacing a <tr> with a <table>? — gonzofish
– gonzofish, Commented Jan 18, 2014 at 14:16

Rob · Accepted Answer · 2014-01-18 23:40:01Z

Create an isolated scope in your directive call data and put a watch on that scope variable.

Example: Plunker Pass in any additional information you need in your directive the same way.

.directive('customtable', function () {
    return {
        restrict: 'A',
        scope: {
          data: '='
        },
        link: function (scope, element, attrs) {
            var html = '<table>';
            scope.$watch('data', function(newValue, oldValue) {
              if (newValue === oldValue) return;
              angular.forEach(newValue, function (row, index) {
                  //html += '<tr><td>' + row.A+ '</td></tr>';
                  html += '<tr><td>' + row.B+ '</td>' +
                  '<td>' + row.C+ '</td>' +
                  '<td>' + row.D+ '</td>' +
                  '<td>' + row.E+ '</td>' +
                  '<td>' + row.F+ '</td>' +
                  '<td>' + row.G+ '</td>' +
                  '<td>' + row.H+ '</td></tr>';
                  if (index == 4) {
                      html += '<tr><td>' + 'Click Here to See All' + '</td></tr>';
                  }
              })

              html += '</table>';
              element.replaceWith(html)
            });


        }
    }
});

Collectives™ on Stack Overflow

Angularjs Directory data executed before service called from controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related