각도 UI 탭에서 동적 내용을 컴파일하는 방법은 무엇입니까?

Question

In this plunk HTML 콘텐츠를 표시하는 각도 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

이 지시어를 사용하여 컴파일 : t 대신 변경

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

참조 그는 구현했다.

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>