ANGUALR 1.4:
. directive (' counter ',functioncounter () {return{scope: {},
Restrict: ' EA ',
Transclude:true, Bindtocontroller: {count:=}, Controller:function () { functionincrement () { This. count++; } functionDecrement () { This. count--; } This. Increment =increment; This. Decrement =decrement; }, Controlleras:' Counter ', Template: [' <div class= ' todo ' > ', ' <input type= ' text "ng-model=" Counter.count ">", ' <button type= ' button "ng-click=" counter.decrement (); " >-</button> ', ' <button type= ' button "ng-click=" counter.increment (); " >+</button> ', ' </div> '].join (‘‘) };});
Angualr1.5:
. Compoment (' counter ', {bindings: {count:=}, Controller:function () { functionincrement () { This. count++; } functionDecrement () { This. count--; } This. Increment =increment; This. Decrement =decrement; }, Controlleras:' VMS ', Template:function($element, $attrs) {return [ ' <div class= ' todo ' > ', ' <input type= ' text "ng-model=" Vm.count ">", ' <button type= ' button "ng-click=" vm.decrement (); " >-</button> ', ' <button type= ' button "ng-click=" vm.increment (); " >+</button> ', ' </div> '].join (‘‘); }, //restrict: ' E ', //transclude:true});
- Direcitve need pass in function, Compoment need pass in object.
- ' Scope ' and ' bindtocontroller ' can replaced with just ' bindings '
- By default restrict: ' E '
- By default Transclude:true
- By default, if not given controlleras, angular would create for your and name is the same as compoment name
[AngularJS] Exploring the Angular 1.5. Component () method