javascript - 无法插入对象属性内部的数组

Question

这只是一个示例代码 这是我的 .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);
                };

            }
        }
    }]);

这是我的 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，这是图像

Answer 1

$interpolate 不处理像 ngRepeat 这样的指令，参见 this .

您需要改用$compile。对于这些情况，我使用 bindHtmlCompile 指令，请参阅 this .

您的指令已更新:

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

])

模板主体:

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

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

更新:

这是 fiddle 的截图:

行之有效的证据是:

column11column12
column21column21