如何在 Angular UI 选项卡中编译动态内容

Question

在这个 plunk 中，我有一个显示 HTML 内容的 Angular UI 选项卡。每个内容都有一个包含 ng-click 指令的div，该指令不起作用。很可能需要编译指令？如何实现呢？

.HTML

  <uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      <div ng-bind-html="tab.content"></div>
    </uib-tab>
  </uib-tabset>

爪哇语

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngSanitize']);
app.controller('ctl', function ($scope) {
     $scope.tabs = [
       { title:'title 1', content:'<div ng-click="click(1)" id="id1">111</div>' },
       { title:'title 2', content:'<div ng-click="click(2)" id="id2">222</div>' }
     ];

     $scope.click = function(i){
       alert(i);
     };
});

Answer 1

这是答案，使用此指令编译：

app.directive('dynamic', function($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, element, attrs) {
            scope.$watch(attrs.dynamic, function(html) {
                element[0].innerHTML = html;
                $compile(element.contents())(scope);
            });
        }
    };
});

看这里

Answer 2

而是更改实现。

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngSanitize']);
app.controller('ctl', function ($scope) {
     $scope.tabs = [
       { title:'title 1', content: {id:1, label: 111} },
       { title:'title 2', content: {id:2, label: 222} }
     ];
     $scope.click = function(i){
       alert(i);
     };
});

   
<uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      <div ng-click="click(tab.content.id)" id="id{{tab.content.id}}">{{tab.content.label}}</div>
    </uib-tab>
  </uib-tabset>

---

其他最好的方法是使用指令。

<uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}">
      <my-directive my-click="click(tab.content.id)" my-content="tab.content"</directive-x>
    </uib-tab>
  </uib-tabset>