Javascript 无法插入位于对象属性内部的数组

这只是一个示例代码 这是我的.js文件

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);
                };

            }
        }
    }]);

SCPApp
.directive（'scocurepeater'、['$sce'、'$compile'、'$timeout'、'$interpolate'，
函数（$sce、$compile、$timeout、$interpolate）{
返回{
限制：“A”，
替换：正确，
范围：{
htmlstring:“=”，
列：“=”，
输入数据：“=”，
inputClass:“@”
},
templateUrl:'/{{currentAppId}}/./Scripts/app/shared/directives/dynamic_render/repeater/partials/repeater.html'，
链接：函数（作用域、元素、属性、$compile）{
//
scope.rarray=[{
“firstname”：“employee1”，“lastname”：“last1”，“department”：“Dept1”，“testdata”：[{“col1”：“column1”，“coln2”：“column12”}，
{“col1”：“column21”，“col2”：“column21”}]
},
{“firstname”：“employee2”，“lastname”：“last2”，“Dept2”}，
{“firstname”：“employee3”，“lastname”：“last3”，“Dept3”}，
{“firstname”：“employee4”，“lastname”：“last4”，“Dept4”}]；
scope.htmlstring=“”
scope.htmlstring=scope.htmlstring+“{{{firstname}”；
scope.htmlstring=scope.htmlstring+“{{lastname}}{{department}}”；
scope.htmlstring=scope.htmlstring+“{{department}}”；
scope.htmlstring=scope.htmlstring+“{{lastname}}{{testdata}}”；
scope.htmlstring=scope.htmlstring+“{{x.col1}}{{x.col2}}”；
scope.trustAsHtml=函数（str）{
返回$sce.trustAsHtml（str）；
};
scope.interpolate=函数（值，obj）{
返回$interpolate（值）（obj）；
};
}
}
}]);

这是我的templateUrl源代码

<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>

---

当使用此指令时，我能够访问所有属性值，接受第一个对象内部的数组，它只给我json，这是图像

不处理像

ngRepeat

这样的指令，请参阅

您需要改用

$compile

。对于这些情况，我使用

bindHtmlCompile

指令，请参阅

您的指令已更新：

.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>";       
    }
  }
}

---

这只是一个猜测，但这是因为您在构建htmlstring的倒数第二行中有

{{testdata}

？是的，但如果我不使用

{testdata}

它将不会捕获该数组中的数据，并且repeater不工作，它只是呈现了所提到的JSONA，因为

{testdata}}}

，你能解释一下为什么需要这个吗？目的是在弹出窗口中显示带有html标记的数组，我获取字符串中的html，使用

ng bind html将其绑定到
即使在你的代码中'ng repeat='x in obj.testdata'`也不会重复！！是的，请查看上面的更新。谢谢，伙计，但是样式不起作用。我还将其编辑为
bind html compile=“trustAsHtml（htmlstring）”
，即使样式不起作用，原因是什么？对于样式，只要样式可用就足够了（不需要技巧）。如果你将css代码添加到问题中，我可以将其添加到小提琴中。谢谢@masa现在我也得到了样式，这是我的错谢谢：）
<div>
  <div ng-repeat="obj in rarray">
    <p bind-html-compile="htmlstring" class="control"></p>
  </div>
</div>

column11column12
column21column21