从innerHTML函数中重复ng？

I have 3 columns. The first lists a list of subjects from an array. Within that array, each subject has it's particular courses listed within, and within that, the rest of the course information.

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

Can I have the ng-repeat "function" operate properly if it is placed using a .innerHTML function?

如果使用.innerHTML函数放置ng-repeat“函数”,我可以正常运行吗?

(I'm new at JS so bare with me. I also could be using the wrong identifiers to try and call content from the array, which could also be causing my problems.)

(我是JS的新手,对我来说很陌生。我也可能使用错误的标识符来尝试调用数组中的内容,这也可能导致我的问题。)

scope:

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

(I haven't done the courseinfo panel stuff yet, I just included it so that the columns would align properly.)

(我还没有完成courseinfo面板的工作,我只是将它包含在内,以便列正确对齐。)

2 个解决方案

#1

No, it won't work.

不,它不会起作用。

You need to use template or directive.

您需要使用模板或指令。

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

You simple move innerHTML string to directive template

您可以将innerHTML字符串简单地移动到指令模板

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

And use it like

并使用它

<my-customer subject="xxx"/>

#2

A directive is a better answer for you. DOM manipulation should be done in directives, not controllers.

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

That said, it is possible using Angular's $compile which makes Angular aware of new HTML.

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

Just as a proof of concept- here's that function (and a 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);
}

In order for this to work we also need to pass in the index of the course you want to show -- ng-click="showDetail($index)". This is because the $compile will compile this against the controller scope, not the one inside the ngRepeat.

为了使其工作,我们还需要传入您想要显示的课程的索引 - ng-click =“showDetail($ index)”。这是因为$ compile将针对控制器范围编译它,而不是ngRepeat中的编译范围。

As you can see it takes jumping through a number of hoops to make this work- which is part of why a directive is better.

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

#1