javascript - 从 innerHTML 函数中重复 ng-repeat？

Question

我有 3 列。第一个列出了数组中的主题列表。在该数组中，每个主题都有其特定的类(class)，其中列出了其余类(class)信息。

如果使用 .innerHTML 函数放置 ng-repeat“函数”，我能否使其正常运行？

我可能使用了错误的标识符来尝试调用数组中的内容，这也可能导致我的问题。

范围:

$scope.subjects = [
    {text:'English', courses:[
        {coursesub:'English 1', coursedata:[
            {coursedesc:'test'}
        ]
        }
    ]
    },
    {text:'Mathematics'},
    {text:'Science'}
];

$scope.showDetail = function (todo) {
    document.getElementById("courselistings").innerHTML = '<a ng-repeat="course in subject.courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{courses.coursesub}}</a>';
};

html + angularjs:

<div class="col-md-3" id="subjects">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Subjects</h3>
                    </div>
                    <div class="panel-body">
                        <div class="list-group">
                            <a ng-repeat="subject in subjects" class="list-group-item" target="#courselistings" ng-click="showDetail(subject)">
                                {{subject.text}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3" id="courselisting">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Courses</h3>
                    </div>
                    <div class="panel-body">
                        <div class="list-group" id="courselistings">
                            test
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6" id="courseinfo">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Course Info</h3>
                    </div>
                    <div class="panel-body">
                        <div class="list-group" id="courseinformation">

                        </div>
                    </div>
                </div>
            </div>

我还没有完成 courseinfo 面板的工作，我只是将它包括在内以便列可以正确对齐。

Answer 1

不，它不会起作用。

您需要使用模板或指令。

http://docs.angularjs.org/guide/directive

你简单地将 innerHTML 字符串移动到指令模板

.directive('myCustomer', function() {
  return {
    scope: {
          subject: '='
    },
    template: '<string here>'
  };
});

像这样使用它

<my-customer subject="xxx"/>