自定义指令：如何使用动态 HTML 评估绑定

Question

设置：

非常简单HTML:

<td ng-repeat="col in cols">
    <div ng-bind-html="col.safeHTML"></div>
</td>

JS 控制器：

$scope.cols = [
    {
      field       : 'logo',
      displayName : 'Logo',
      cellTemplate: '<div style="color:red">{{col}}</div>'
    },
    {
      field       : 'color',
      displayName : 'Color',
      cellTemplate: '<div style="color:green">{{col}}</div>
    }
  ];

JS link指令link函数：

        for (var i = 0, j = $scope.cols.length;
               i < j;
               i++) {

            if ($scope.cols[i].hasOwnProperty('cellTemplate')) {
              $scope.cols[i].safeHTML = $sce.trustAsHtml($scope.cols[i].cellTemplate);
            }
          }

它正确地转义了 HTML 但绑定 ({{some_var}}) 没有被插入。

如何让 Angular 计算保险箱 HTML 中的绑定？我尝试使用 bind 的几种变体，例如 ngBindTemplate 但没有用:(

Answer 1

如果您计划动态编译 angular 组件并手动将它们添加到 DOM，您实际上想要使用 $compile 服务。

通过一些自定义指令工作，您可以非常轻松地完成这项工作。

function compileDirective($compile) {

  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      //Watch for changes to expression
      scope.$watch(attrs.compile, function(newVal) {

        //Compile creates a linking function
        // that can be used with any scope
        var link = $compile(newVal);

        //Executing the linking function
        // creates a new element
        var newElem = link(scope);

        //Which we can then append to our DOM element
        elem.append(newElem);
      });
    }
  };

}


function colsController() {
  this.cols = [{
    name: "I'm using an H1",
    template: "<h1>{{col.name}}</h1>"
  }, {
    name: "I'm using an RED SPAN",
    template: "<span style=\"color:red\">{{col.name}}</span>"
  }];
}

angular.module('sample', [])
  .directive('compile', compileDirective)
  .controller('colsCtrl', colsController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.4/angular.min.js"></script>
<div ng-app="sample">

  <ul ng-controller="colsCtrl as ctrl">
    <li ng-repeat="col in ctrl.cols">
      <!-- The "compile" attribute is our custom directive -->
      <div compile="col.template"></div>
    </li>
  </ul>

</div>

自定义指令：如何使用动态 HTML 评估绑定

Custom directive: How evaluate bindings with dynamic HTML

javascript

eval

angularjs

angularjs-directive