angularjs - Reusable Button Directive -


i got 2 buttons different functions , name, classes same. can create directive buttons?

<div class="sub l">     <button class="b week" ng-click='manageday(cadd, csub = csub + 7)' ng-model="csub" ng-init='csub=0'>substract week/button> </div>  <div class="sub l">     <button class="b day" ng-click='manageday(cadd, csub = csub + 1)' ng-model="csub" ng-init='csub=0'>substract day</button> </div> 

how can create button directive out of this? as:

<div substract-button></div> 

var app = angular.module('testapp', [ ]);        app.directive('telsavebutton', function() {      return{          restrict: 'e',  		           template: '<button type="submit" ng-click="onformsubmit()" >directive button</button>',          transclude: true,          scope: {              onsubmit: '&',   			onformsubmit: '&' 			           },          link: function(scope, element, attributes){              scope.submit = function(){                  scope.onsubmit();              }          }      }  });         app.controller('testcntler', ['$scope', '$location',  function ($scope, $location) {    $scope.testcontroller=function()    {  	   alert("working")    }        }]);    
<script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>  <body class="hold-transition skin-blue sidebar-mini" data-ng-app="testapp"  >     <form novalidate="novalidate" ng-submit="vm.onsubmit()"  ng-controller="testcntler" >        <table width="293" border="0">    <tr>      <td width="127">first name</td>      <td width="150"> <input type="text"  ng-model="fname" ></td>    </tr>    <tr>      <td>mid name</td>      <td> <input type="text"  ng-model="mname" ></td>    </tr>    <tr>      <td>last name</td>      <td> <input type="text"  ng-model="lname" ></td>    </tr>        <tr>      <td colspan="2"> <button type="submit" ng-click="testcontroller()" >static button</button>       <tel-savebutton check-id="firstname" on-form-submit="testcontroller()"></tel-savebutton></td></td>     </tr>      </table>                        </form>    </body>


Comments

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -