0

我一直在寻找这个问题几个小时，我似乎无法在这里找到解决方案。

我正在尝试创建一个应该能够呈现 HTML 的功能位的指令。我认为通过 $compile 运行 HTML 就足够了，但它似乎只有 1 级深度。

如何编译我的数据的 rawHtml 部分，以便 ng-click 起作用？

** 编辑：我想出了如何使用 angular sanitize 来返回 HTML，但是，它仍然没有被编译。如何将其编译到范围？

Plunker：http ://plnkr.co/edit/f9nxHlbRThzSHoD3Awhp?p=preview

<body ng-app='testApp'>
  <div ng-controller='testCtrl'>
    <test-directive ng-model='dataItems'></test-directive>
  </div>
</body>

和JS

var app = angular.module('testApp', ['ngSanitize']);

app.controller('testCtrl', ['$scope', function($scope) {
  $scope.dataItems = [
      { name: 'Test1', rawHtml: '<input type="button" ng-click="onClick(1);" value="Click 1" />' },
      { name: 'Test2', rawHtml: '<input type="button" ng-click="onClick(2);" value="Click 2" />' }
    ]
}]);

app.directive('testDirective', ['$compile', '$sce', function($compile, $sce) {
  return {
    restrict: 'E',
    scope: {
      ngModel: "="
    },
    template: "<ul><li ng-repeat='item in ngModel'><div ng-bind-html=\"getHtml(item.rawHtml)\">{{item.name}}</div></li></ul>",
    controller: function($scope) {
      $scope.onClick = function(num) {
        console.log(num);
      }

      $scope.getHtml = function(html) {
        return $sce.trustAsHtml(html); 
      }
    }
  }
}])
4

1 回答 1

3

其实你应该尽量避免它。它可以在非常罕见的情况下完成，并且非常小心地使用。

在 AngularJS 方式中，您应该在视图中提供所有可能的内容，并且不要在 JS 代码中放置任何视图逻辑。您可以包含不同的模板，您可以使用ng-switch/ng-if选择其中一个选项。

但是如果你真的需要它，你$compile确实可以使用它。您可以为此使用指令：

app.directive('compile', function($compile) {
  return {
    restrict:'A',
    link: function(scope, element, attr) {
      element.append($compile(attr.compile)(scope));
    }
  }  
})

并将其用作

<div compile="{{item.rawHtml}}">

Plunker：http ://plnkr.co/edit/6vNg5fP5yfOsATmSkReg?p=preview

但请谨慎使用。我不建议将此指令用于一般目的。

于 2014-11-25T22:03:12.077 回答