Angular Directive .2

by chenjy

HTML

<div ng-app="App" ng-controller="Ctrl" class="app">
    <div ng-repeat = "info in infoList">
       <my-dir info="info" change-age="changeAge(info)"></my-dir>
    </div>
    <br>
       <my-dir2></my-dir2>
    
</div>

CSS

.app{
  border: 5px solid #FF851B;
  padding: 10px;
}
.info{
  color:#0074D9;
  
}

.age{
  color:#FF4136;
}

JavaScript

angular.module("App", []).controller("Ctrl", ["$scope","$sce",function($scope, $sce) {
   
   //var transHtml = $sce.trustAsHtml(html); 
   
   $scope.infoList = [{
          name:"chenjy",
          age:16,
          html:"<button ng-click='changeAge1(0)'>showLog</button>"
   },{
          name:"tom",
          age:16,
          html:"<button ng-click='changeAge1(1)'>showLog</button>"
   },{
          name:"jerry",
          age:16,
          html:"<button ng-click='changeAge1(2)'>showLog</button>"
   }];
   
   $scope.changeAge = function(info){
          info.age++;
   }
   
   $scope.changeAge1 = function(age){
          $scope.infoList[age].age ++;
   }
   
 
}]).directive("myDir", function() {
    return {
       template:"<div>"+
                "  <button ng-click='changeAge(info)'>changeAge</button>&nbsp;name:"+
                "  <span>{{info.name}}</span>&nbsp;age:"+
                "  <span class='age'>{{info.age}}</span>"+
                "</div>",
       restrict:"E",
       scope:{
         info:"=",
         changeAge:"&"
       }
    };
}).directive("myDir2", ["$compile",function($compile) {
    return {
       template:"<div ng-repeat = 'info in infoList'>"+
                "  <div>"+
                "    <html-compile html='{{info.html}}'></html-compile>&nbsp;name:"+
                "    <span class='info'>{{info.name}}</span>&nbsp;age:"+
                "    <span>{{info.age}}</span>"+
                "  </div>"+
                "</div>",
       restrict:"E"
    };
}]).directive("htmlCompile", ["$compile", function($compile) {
        return {
            replace: true,
            restrict: 'EA',
            link: function(scope, elm, iAttrs) {
                var DUMMY_SCOPE = {
                        $destroy: angular.noop
                    },
                    root = elm,
                    childScope,
                    destroyChildScope = function() {
                        (childScope || DUMMY_SCOPE).$destroy();
                ...