Unable to interpolate an array which is inside of an object property

Question

This is just a Sample Code this is my .js file

SCPApp
.directive('scocurepeater', ['$sce', '$compile', '$timeout','$interpolate',
    function ($sce, $compile, $timeout, $interpolate) {
        return {
            restrict: 'A',
            replace: true,
            scope: {
                htmlstring: "=",
                columns: "=",
                inputdata: "=",
                inputClass: "@"
            },
            templateUrl: '/{{currentAppId}}/../Scripts/app/shared/directives/dynamic_render/repeater/partials/repeater.html',
            link: function (scope, element, attr, $compile) {
                //
                scope.rarray = [{
                    "firstname": "employee1", "lastname": "last1", "department": "Dept1", "testdata": [{ "col1": "column11", "col2": "column12" },
                        { "col1": "column21", "col2": "column21" }]
                },
                { "firstname": "employee2", "lastname": "last2", "department": "Dept2" },
                   { "firstname": "employee3", "lastname": "last3", "department": "Dept3" },
                   { "firstname": "employee4", "lastname": "last4", "department": "Dept4" }];
                scope.htmlstring = "<div class='wrapper'><div class='left-wrapper'><img src='http://betanews.com/wp-content/uploads/2014/05/Enterprise-apps.jpg' width='50px' height='50px' >"
                scope.htmlstring = scope.htmlstring+"</div><div class='right-wrapper'><div class='top-right-wrapper'><strong>{{firstname}}</strong> </div><div class='top-right-wrapper'>";
                scope.htmlstring = scope.htmlstring + "<div class='left-inner'>{{lastname}}</div><div class='left-inner'>{{department}}</div></div>";
                scope.htmlstring = scope.htmlstring + "<div class='top-right-wrapper'><div class='left-inner'>{{department}}</div>";                        
                scope.htmlstring = scope.htmlstring + " <div class='left-inner'>{{lastname}}</div><div>{{testdata}}</div>    ";
                scope.htmlstring = scope.htmlstring + "<div ng-repeat='x in testdata'>{{x.col1}}{{x.col2}}</div>   </div></div></div>";
                    scope.trustAsHtml = function (str) {
                        return $sce.trustAsHtml(str);
                    };
               scope.interpolate = function (value, obj) {
                   return $interpolate(value)(obj);
                };

            }
        }
    }]);

and this is my templateUrl source code

<div>
<div>
    <div >
        <div ng-repeat="obj in rarray">
            <p ng-model="value" ng-bind-html="trustAsHtml(interpolate(htmlstring,obj))" class="control"></p>
        </div>
    </div>
</div>

when is use this directive i am able to access all property values accept that array which is inside of first object, its just giving me the json, this is the image

This is just a guess, but is it because you have ```{{testdata}}``` in the second to last line constructing the htmlstring? — jgawrych, Dec 19 '15 at 06:43
Yes but if i dont use `{{testdata}}` it will not catch the data which is inside of that array, and repeater is not working, it is only rendering the json — Syed Rasheed, Dec 19 '15 at 06:49
As mentioned about its because `
{{testdata}}
`, can you clarify why you need this? — Daniel Kobe, Dec 19 '15 at 08:30
the purpose is to display that array inside of that popup with html tags, I get the HTML in string, am binding it to using `ng-bind-html` — Syed Rasheed, Dec 19 '15 at 10:40

score 1 · Accepted Answer · edited May 23 '17 at 10:27

$interpolate does not handle directives like ngRepeat, see this.

You need to use $compile instead. I use the bindHtmlCompile directive for these cases, see this.

Your directive updated:

.directive('scocurepeater', ['$compile',
    function($compile) {
        return {
            restrict: 'A',
            replace: true,
            scope: {},
            templateUrl: 'repeater.html',
            link: function(scope, element, attr, $compile) {
            //
                scope.rarray = [{
                    "firstname": "employee1",
                    "lastname": "last1",
                    "department": "Dept1",
                    "testdata": [{
                        "col1": "column11",
                        "col2": "column12"
                    }, {
                        "col1": "column21",
                        "col2": "column21"
                    }]
                }, {
                    "firstname": "employee2",
                    "lastname": "last2",
                    "department": "Dept2"
                }, {
                    "firstname": "employee3",
                    "lastname": "last3",
                    "department": "Dept3"
                }, {
                    "firstname": "employee4",
                    "lastname": "last4",
                    "department": "Dept4"
                }];

                scope.htmlstring = "<div class='wrapper'><div class='left-wrapper'><img src='http://betanews.com/wp-content/uploads/2014/05/Enterprise-apps.jpg' width='50px' height='50px' >"
      scope.htmlstring = scope.htmlstring + "</div><div class='right-wrapper'><div class='top-right-wrapper'><strong>{{firstname}}</strong> </div><div class='top-right-wrapper'>";
                scope.htmlstring = scope.htmlstring + "<div class='left-inner'>{{obj.lastname}}</div><div class='left-inner'>{{obj.department}}</div></div>";
                scope.htmlstring = scope.htmlstring + "<div class='top-right-wrapper'><div class='left-inner'>{{obj.department}}</div>";
                scope.htmlstring = scope.htmlstring + " <div class='left-inner'>{{obj.lastname}}</div><div>{{obj.testdata}}</div>    ";
                scope.htmlstring = scope.htmlstring + "<div ng-repeat='x in obj.testdata'>{{x.col1}}{{x.col2}}</div>   </div></div></div>";       
    }
  }
}

])

The body of the template:

<div>
  <div ng-repeat="obj in rarray">
    <p bind-html-compile="htmlstring" class="control"></p>
  </div>
</div>

Fiddle: https://jsfiddle.net/masa671/fLa9o1pe/

UPDATE:

Here's a screenshot of the fiddle:

The proof that it works are the lines:

column11column12
column21column21

even in your code ` ng-repeat='x in obj.testdata'` is not getting repeated!! — Syed Rasheed, Dec 21 '15 at 03:46
Thanks mate, but styles are not working i also edited that as `bind-html-compile="trustAsHtml(htmlstring)"` even though styles are not working, what would be the reason? — Syed Rasheed, Dec 21 '15 at 09:21
For styles it should suffice that the styles are just available (no tricks required). If you add the css code to the question, I can add it to the fiddle. — masa, Dec 21 '15 at 13:07
Thanks @masa now i got the styles also, that was my fault thanks :) — Syed Rasheed, Dec 21 '15 at 13:24

Unable to interpolate an array which is inside of an object property

1 Answers1