Angular Components

Angular Components

by suraj mahajan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app='demo' ng-controller='DemoController' >
{{rating}}
<my-confirmation
  message="'Launch missiles?'"
  on-ok="launchMissiles()">
</my-confirmation>

</div>
<script>
angular.module('demo', [])
.directive('myConfirmation', function() {
  return {
    scope: {},
    bindToController: {
      message: '=',
      onOk: '&'
    },
    controller: function() { },
    controllerAs: 'ctrl',
    template: `
      <div>
        {{ctrl.message}}
        <button ng-click="ctrl.onOk()">
          OK
        </button>
      </div>
    `
  }
})
.controller('DemoController', function($scope) {
    $scope.rating = 42;     
    $scope.minRating = 40;
    $scope.maxRating = 50;
    $scope.launchMissiles=function(){
    	alert('sdf');
    }
})
</script>