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
Post a Comment