Angular Directive .1

by chenjy

HTML

<div ng-app="App" ng-controller="Ctrl" class="app">
    <div><my-dire></my-dire></div>
    <div class="my-dirc"></div>
    <div my-dira info="myInfo" hisinfo="{{hisInfo}}" change-info="changeMyinfo()" myage="myage"></div>
</div>

CSS

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

.age{
  color:#FF4136;
}

JavaScript

angular.module("App", []).controller("Ctrl", function($scope) {
 
 $scope.myage = 16;
 
 $scope.myInfo = {
        name:"chenjy"
 };
 
 $scope.hisInfo = "his name:john,his age:16";
 

 $scope.changeMyinfo = function(){
        $scope.myage++;
        $scope.myInfo.name += "_";
 }
 
}).directive("myDire", function() {
    return {
       template:"<span>directive E</span><div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div>",
       restrict:"E",
       scope:false
    };
}).directive("myDirc", function() {
    return {
       template:"<span>directive C</span><div>my name:<span class='info'>{{myInfo.name}}</span>,my age:<span class='age'>{{myage}}</span></div><div><input type='text' ng-model='myInfo.name'/><input type='text' ng-model='myage'/></div>",
       restrict:"C",
       scope:true
    };
}).directive("myDira", ["$log",function($log) {
    return {
       template:"<div>directive A </div><div>my name:<span class='info'>{{info.name}}</span>,my age:<span class='age'>{{myage}}</span><span>{{hisinfo}}</div><div><button ng-click = 'changeInfo()'>ChangeMyInfo</button></div>",
       restrict:"A",
       scope:{
            info:"=",
            hisinfo: "@",
            changeInfo:"&",
            myage:"="
       },
       controller:function($scope, $element, $attrs, $transclude) {
          $log.info("lifecycle controller");
       },
     	 compile:function(tElement, tAttrs, transclude){
         $log.info("lifecycle compile");
          return{
            pre:function(scope, iElement, iAttrs, controller){
              $log.info("lifecycle pre")
            },
            post:function(scope, iElement, iAttrs, controller){
             $log.info("lifecycle post")
            }
          }
      },
      link:function(scope, iElement, iAttrs, controller){
       $log.info("lifecycle link")
      }
    };
}]);