CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
Vid
Vid

Reputation: 173

Turn a button into a directive AngularJS

As the title says, I would like to call the button on a HTML page as a custom directive. Like: 

<buy-button></buy-button>

Below is the code I want to transform: 

<md-button class="md-cornered" 
           ng-disabled="0>=gains" 
           ng-click="buyTaxi()">Buy a Taxi</md-button>

Upvotes: 1

Views: 36

Answers (1)

lin
lin

Reputation: 18392

This is a basic transform of your element into a directive. There is no real advantage of doing it but it does what you want:

> demo fiddle

View

<div ng-controller="MyCtrl">
  <my-directive></my-directive>
</div>

AngularJS application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {});

myApp.directive('myDirective', function () {
    return {
      restrict: 'E',
      replace: true,
      template: `<md-button class="md-cornered" ng-disabled="0>=gains" ng-click="buyTaxi()">Buy a Taxi</md-button>`,
      link: function (scope, element, attrs) {

         scope.gains = 1;

         scope.buyTaxi = function () {
            console.log('Buy me a nice taxi!');
         }
      }
    }
});

Upvotes: 1

Related Questions