如何在Angular UI選項卡中編譯動態內容？

Question

In this plunk我有一個顯示HTML內容的Angular UI選項卡。每個內容有一個div包含ng-click指令，這是行不通的。這個指令很可能需要編譯？如何實現這一目標？

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> 

的Javascript

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

看到here

Answer 2

相反變化率T他執行。

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>