javascript - 插入使用 ng-click 的动态模板

Question

我正在使用 AngularJS(v 1.28) ng-repeat 指令列出一堆用户，如下面的代码所示。某些用户可以在标题为“帐户模式”的列中看到用户帐户的状态(打开或关闭)。其他用户(管理员)应该看到一组单选按钮，这些按钮显示帐户的当前状态，但也允许他们更改状态。确定用户应该看到的内容所需的所有信息都在 $scope.groups 中。下面的代码提供了我在屏幕上期望的内容，但 ng-click 函数似乎从未被调用(这就是问题所在)。我环顾四周，问题似乎是我必须对字符串调用编译？但是，当我执行此操作并返回 $sce.trustAsHtml($compile(controlHtml)); 时，我在屏幕上看不到任何内容。我也查看了指令，但我似乎不清楚如何在这种情况下使用它们。

JSfiddle .

注意:当我尝试此操作时 return $sce.trustAsHtml($compile(controlHtml));我确实注入(inject)了$compile。

HTML:

<div ng-controller="usersController">
    <table ng-show="group.expanded">
        <thead>
            <tr>
                <th>Title</th>
                <th>Created</th>
                <th>Modified</th>
                <th>Account Mode</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="user in groups.users">
                <td>{{user.name}}</td>
                <td>{{user.dateCreated | dateFormat}}</td>
                <td>{{user.dateUpdated | dateFormat}}</td>
                <td ng-bind-html="getUserModeHtml(user,group.isAdmin)"></td>
            </tr>
        </tbody>
    </table>
</div>

Javascript:

angular.
module("userLibrary").
controller("usersController", function ($scope, $filter,$sce, userGroups) {
    "use strict";

     $scope.groups = userGroups;

     $scope.getUserModeHtml = function (user,isAdmin) {
        var controlHtml;

        if(isInternalUser){

            if (user.isLocked) {
                controlHtml = "<input type='radio' name='userMode-" + user.id + "' value='on' ng-click='toggleUserModeMode(user)' >On<input type='radio' name='-" + user.id + "' value='off'  ng-click='toggleUserMode(user)' checked='checked'>Off";
            } else {
                controlHtml = "<input type='radio' name='userMode-" + user.id + "' value='on'  ng-click='toggleUserMode(user)' checked='checked'>On<input type='radio' name='UserMode-" + user.id + "'  ng-click='toggleUserMode(user)' value='off'>Off";
            }
        }
        else
        {
            controlHtml = user.isLocked ? "On" : "Off";
        }

        return $sce.trustAsHtml(controlHtml);
    }
});

Answer 1

您应该使用 $compile 提供程序并使用 make 指令来编译自定义 html

app.directive('htmlBinder', function ($compile) {
  return {
    restrict: 'A',
    replace: true,

    link: function (scope, ele, attrs) {
      scope.$watch(attrs.htmlBinder, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

http://jsfiddle.net/62cg2usn/2/