Question

我有3列。第一个列出了数组中的主题列表。在该阵列中，每个主题都有其中列出的特定课程，其中包括课程信息的其余部分。

如果使用.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"/>

Answer 2

指令是一个更好的答案。 DOM操作应该在指令中完成，而不是控制器。

也就是说，可以使用Angular的$compile使Angular知道新的HTML。

正如概念证明 - 这是函数（和working fiddle）：

$scope.showDetail = function (todo) {
    var html= '<div><a ng-repeat="course in subjects['+todo+'].courses" class="list-group-item" target="#courseinformation" ng-click="showDetail(course)">{{course.coursesub}}</a></div>';
    var innerHTML =$compile(html)($scope) 
    var currente = angular.element(document.getElementById("courselistings"));

    currente.replaceWith(innerHTML);
}

为了实现这一目标，我们还需要传递您要展示的课程索引 - ng-click="showDetail($index)"。这是因为$compile将针对控制器范围编译它，而不是ngRepeat内的编译器。

正如你所看到的那样，需要跳过一些箍来完成这项工作 - 这是指令更好的部分原因。

从innerHTML函数中重复ng？

2 个答案: