AngularJS $compile動態生成html

angular.module('app')
    .directive('compile', function ($compile) {
        return function (scope, element, attrs) {
            scope.$watch(
              function (scope) {
                  
                  return scope.$eval(attrs.compile);
              },
              function (value) {
                  element.html(value);
                  $compile(element.contents())(scope);
              }
            );
        };
    });

　　

   <div ng-app="app" ng-controller="SampleCtrl" class="container">
        <div ng-repeat="item in items">
            {{item.name}}<br />
            <div compile="item.tempatle"></div>          
        </div>    
    </div>

　　

 <script>
        angular
            .module('app')
            .controller('SampleCtrl', function ($scope, $filter) {

                $scope.open = function () {
                    alert("ddd");
                }
                $scope.items = [
                    { "name": "zhangsan", tempatle: '<i class="searchicon fa fa-search"   ng-click="open()" style="color:#5db2ff;cursor:pointer;">點擊</i>' },
                    { "name": "lisi", tempatle: '<i class="searchicon fa fa-search"   ng-click="open()" style="color:#5db2ff;cursor:pointer;">點擊</i>' },
                    { "name": "wangwu", tempatle: '<i class="searchicon fa fa-search"   ng-click="open()" style="color:#5db2ff;cursor:pointer;">點擊</i>' }]

            });
    </script>