Javascript 插入使用ng单击的动态模板

我使用AngularJS（v1.28）ng repeat指令列出一组用户，如下面的代码所示。某些用户可以在标题为“帐户模式”的列中查看用户帐户的状态（打开或关闭）。其他用户（管理员）应该看到一组单选按钮，显示帐户的当前状态，但也允许他们更改状态。确定用户应该看到的内容所需的所有信息都在

$scope.groups

中。下面的代码提供了我在屏幕上期望的内容，但似乎从未调用ng click函数（这就是问题所在）。我环顾四周，似乎问题是我必须对字符串调用compile？但是当我这样做并且

返回$sce.trustAsHtml（$compile（controlHtml））我在屏幕上看不到任何东西。我也看过指令，但在这种情况下如何使用它们似乎并不清楚


注:
当我尝试此
返回$sce.trustAsHtml（$compile（controlHtml））
我确实注入了
$compile

HTML:


标题
创建
被改进的
帐户模式
{{user.name}
{{user.dateCreated}日期格式}
{{user.dateUpdated}日期格式}

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);
    }
});

angular。
模块（“用户库”）。
控制器（“usersController”，函数（$scope、$filter、$sce、userGroups）{
“严格使用”；
$scope.groups=用户组；
$scope.getUserModeHtml=函数（用户，isAdmin）{
var-controlHtml；
如果（isInternalUser）{
如果（用户已锁定）{
controlHtml=“OnOff”；
}否则{
controlHtml=“OnOff”；
}
}
其他的
{
controlHtml=user.isLocked？“开”：“关”；
}
返回$sce.trustAsHtml（controlHtml）；
}
});
您应该使用$compile provider和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);
      });
    }
  };
});

使用该示例，我遇到了以下错误：试图在需要字符串的内容中信任非字符串值：Context:htmlc您能试试whithot trustAsHtml吗？因为它已经被信任的内容最终还是会出错，所以尝试从控制器返回DOM节点似乎是不可取的。你能把它放到小提琴里吗？这是我现在的小提琴，没有你建议的改动
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);
      });
    }
  };
});