2

我想动态添加 HTML 内容angularJs，但得到和错误：

"$compile is not defined"

可能是什么原因？

代码

<td ng-repeat="user in users[0].yds" data-title="'Timeline'" sortable="timeline" style="text-align: center" >
    <div class="circle_dynamic"></div>
</td>


angular.module('elnApp')
  .controller('ProgramtableCtrl', function ($scope, $location, $filter, ngTableParams,    
     programTableService) {
        for(var i=0; i<=$scope.users[0].projects.length; i++){
            for(var j=0; j<$scope.users[0].projects[i].results.length; j++){

                if($scope.users[0].projects[i].results[j] == 0){

                    $(".circle_dynamic").html(
                      $compile(
                         ""
                      )(scope)
                    );
                    console.log('rm')
                }else{

                    $(".circle_dynamic").html(
                      $compile(
                         "<i ng-class='circle_class' style='position: absolute;'></i>"
                      )(scope)
                    );
                    console.log('add')
                }
            }

        }

    }, true);

}});

如何动态添加html内容？请帮忙

4

4 回答 4

0

如果您只想添加 html 内容ng-bindHtmlUnsafe就可以了。

在 HTML 中

<div class="circle_dynamic" ng-bindHtmlUnsafe={{expression}}></div>

在控制器中

$scope.expression="<i ng-class='circle_class' style='position: absolute;'></i>"

在此处查看文档

于 2013-08-22T06:34:16.127 回答
0

在 angularjs 中，作为最佳实践，您应该使用指令进行 DOM 操作

为什么需要编译它？

于 2013-08-22T06:38:02.110 回答
0

你不需要在$compile这里打电话。

注意：对我来说，硬编码索引$scope.users[0].projects.length在逻辑上似乎不正确，你确定要这样吗？

代码中的这些行非常令人困惑。如果你告诉你用户的数据结构是什么（即用户、项目和结果之间的关系）以及你想要实现什么，你会更容易得到答案。

for(var i=0; i<=$scope.users[0].projects.length; i++){
    for(var j=0; j<$scope.users[0].projects[i].results.length; j++){

以下解决方案假设

users是一个用户数组。

每个user都有很多projects，user.projects数组也是。

如果存在，您希望class="circle_class"为每个结果显示一个 div。

有了这些假设，以下应该就足够了。

<td ng-repeat="user in users[0].yds"
    data-title="'Timeline'"
    sortable="timeline"
    style="text-align: center" >
  <div ng-repeat="project in user.projects">
    <div ng-repeat="result in project.results"
         ng-show="result">
      <i ng-class='circle_class' style='position: absolute;'></i>
      </div>
  </div>
</td>
于 2013-08-22T07:32:08.320 回答
0

“$compile 未定义”发生是因为您忘记将其注入控制器。

使用 $compile 动态添加 HTML 内容是可以的。但不要在你的控制器中这样做。在指令中执行。

于 2013-08-22T09:03:33.460 回答