adding image with html-content="true" result in [$rootScope:infdig] 10 $digest() iterations reached. Aborting! error

there is error [$rootScope:infdig] 10 $digest() iterations reached. Aborting! error when trying to add image on mdt-cell here is the code <mdt-table table-card="{visible: true, title: 'Nutritions'}" selectable-rows="true" alternate-headers="'contextual'" sortable-columns="true" paginated-rows="{isEnabled: true, rowsPerPageValues: [5,10,20,100]}" delete-row-callback="deleteRowCallback(rows)"> <mdt-header-row> <mdt-column align-rule="left">Picture</mdt-column> <mdt-column align-rule="left">Dessert (100g serving)</mdt-column> <mdt-column align-rule="right" column-definition="The total amount of food energy in the given serving size.">Calories</mdt-column> <mdt-column align-rule="right">Fat (g)</mdt-column> <mdt-column align-rule="right">Carbs (g)</mdt-column> <mdt-column align-rule="right">Protein (g)</mdt-column> <mdt-column align-rule="right">Sodium (mg)</mdt-column> <mdt-column align-rule="right">Calcium (%)</mdt-column> <mdt-column align-rule="right">Iron (%)</mdt-column> </mdt-header-row> <mdt-row ng-repeat="nutrition in nutritionList track by $index" table-row-id="nutrition.id"> <mdt-cell html-content="true" > <div class="crop"> <img src="{{nutrition.img}}" alt="nutrition.name" /> </div> </mdt-cell> <mdt-cell>{{nutrition.name}}</mdt-cell> <mdt-cell>{{nutrition.calories}}</mdt-cell> <mdt-cell>{{nutrition.fat}}</mdt-cell> <mdt-cell>{{nutrition.carbs}}</mdt-cell> <mdt-cell>{{nutrition.protein}}</mdt-cell> <mdt-cell>{{nutrition.sodium}}</mdt-cell> <mdt-cell>{{nutrition.calcium}}</mdt-cell> <mdt-cell>{{nutrition.iron}}</mdt-cell> </mdt-row> </mdt-table>

[tristan-morrison]

I’ve already forgotten what hunch led to this and I can’t explain why it works, but I got it to work by preventing the $watch function that watches mdtAddHtmlContentToCell from using object equality.

In mdDataTable/dist/md-data-table.js:

Current code: `function mdtAddHtmlContentToCellDirective(){

    return {
        restrict: 'A',
        link: function($scope, element, attr){
            $scope.$watch(attr.mdtAddHtmlContentToCell, function(val){
                element.empty();
                element.append(val.value);
            }, true); //objectEquality set to true; using angular.equals() for equality evaluation
        }
    };
}`

The last parameter of the $watch function, objectEquality, is set to true so that angular.equals is used to evaluate equality of old and new values for attr.mdtAddHtmlContentToCell. For some reason that I still can’t pinpoint, this must be causing old and new values to evaluate to unequal on every $digest loop, even if they are the same.

To fix, change the last parameter of the $watch function from true to false.

New Code:

`function mdtAddHtmlContentToCellDirective(){

    return {
        restrict: 'A',
        link: function($scope, element, attire){
            $scope.$watch(attr.mdtAddHtmlContentToCell, function(val){
                element.empty();
                element.append(val.value);
            }, false); //set objectEquality to be false
        }
    };
}`

Like I said, still can’t explain exactly why this solves the problem, so it may just be a fluke with my particular use case. If this works for others, let me know and I’ll submit a pull request.

[JesterJeffrey]

Same issue. No matter what goes between the tag, setting html-content=“true” causes the problem.