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>