在生成的 html (angularJs) 中使用 ng-click 和 scope 函数答案

【问题标题】：Using ng-click and scope functions in generated html (angularJs)在生成的 html (angularJs) 中使用 ng-click 和 scope 函数
【发布时间】：2017-06-18 00:37:51
【问题描述】：

我有这样的代码：

$scope.printOutRowModel = function(){
    console.log("blah");
}


$scope.createTable = function(name)
{   
        var element = angular.element(document.querySelector('.popup'));
        var content = "";
        content+='<div><hr/>';
        content+='<h4>'+name+'</h4>';
        content+='<table><thead>';
        var columnName = Object.keys($scope.genericModel[name][0]);
    for(var i=0; i<columnName.length; i++)
    {
        if(columnName[i] != "$$hashKey")
        {
        content+='<th>'+columnName[i]+'</th>';
        }
    }
        content+='</thead><tbody>';
    for(var j=0; j<$scope.genericModel[name].length; j++)
    {
        content+='<tr>';
        var value = Object.values($scope.genericModel[name][j]);
        for(var i=0; i<value.length-1; i++)
        {   
        content+='<td>'+value[i]+'</td>';
        }
        content+='</tr>';
        value = null;
    }
        content+='</tbody></table></div>';
        element.html(content);
}

所以现在我要做的就是将 'ng-click = "printOutRowModel()"' 添加到生成的 "td" 元素中。我尝试了多种方法，但我不工作。当我将它添加到我的 index.html 中已经存在的任何其他元素时，它确实有效。所以我猜这个生成的 HTML 没有在范围内“编译”。那么有没有办法做到这一点呢？

【问题讨论】：

标签： javascript html angularjs scope append

【解决方案1】：

将此指令添加到您的应用中：

app.directive('template', ['$compile', function($compile) {
    return function(scope, element, attrs) {
        attrs.$observe("template", function(_newVal) {
            scope.$applyAsync(function() {
                element.html(_newVal);
                $compile(element.contents())(scope);
            });
        });

    };
}]);

然后不要在createTable 函数中选择.popup 类，而是这样做：

<div class="popup" template="{{myTableTpl}}"></div>

把你的函数改成这样：

$scope.createTable = function(name)
{   
    var content = "";
    // Create your content...
    $scope.myTableTpl = content;
}

<!doctype html>
<html ng-app="app">



<body ng-controller="ctrl">

  <div template="{{tpl}}"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

  <script>
    angular.module('app', [])
      .directive('template', ['$compile',
        function($compile) {
          return function(scope, element, attrs) {
            attrs.$observe("template", function(_newVal) {
              scope.$applyAsync(function() {
                element.html(_newVal);
                $compile(element.contents())(scope);
              });
            });

          };
        }
      ])
      .controller('ctrl', function($scope) {
        $scope.tpl = '<h1>METE-30</h1>'
      });
  </script>

</body>

</html>

【讨论】：

我这样做了，但我的内容没有显示在页面上，但是当我在页面上按 f12 时，它会在 template="..." 下显示它。我是不是做错了什么？
@i1zivkovic 这很奇怪！控制台有什么错误吗？
不，我不知道。嗯..我试图将 {{myTableTpl}} 移动到 div 标签内，但它会将内容显示为字符串.. 我刚开始做角度，所以我真的不知道。
@i1zivkovic ，我在指令中更改了一行，并将检查的代码放入答案中。