Question

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

JSfiddle

注意：当我尝试这个时return $sce.trustAsHtml($compile(controlHtml)); 我注射了$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 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);
      });
    }
  };
});

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

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

1 个答案: