Question

我有2个具有不同功能和名称的按钮，但是类是相同的。我可以为按钮创建指令吗？

<div class="sub l">
    <button class="b week" ng-click='manageDay(cAdd, cSub = cSub + 7)' ng-model="cSub" ng-init='cSub=0'>substract a 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 a day</button>
</div>

如何创建一个按钮指令呢？我想要的东西是：

<div substract-button></div>

Answer 1

＆＃13;

SELECT 
    ROW_NUMBER()OVER(PARTITION BY P_Key ORDER BY P_Key,Name),T.Name,T.phone,T.address,T.zip
FROM
(
    SELECT P_Key,Name,phone,address,zip FROM id_test1 
    UNION ALL
    SELECT P_Key,Name,phone,address,zip FROM id_test2 
)T

＆＃13;

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")
  }
  
  }]);

＆＃13;

Answer 2

是的，您可以创建指令，请参阅示例：

您的观点：

<div substract-button action="manageDay(cAdd, cSub = cSub + 1)">Substract a day</div>
<div substract-button action="manageDay(cAdd, cSub = cSub + 1)">Substract a week</div>

指令：

  app.directive('substractButton', [

  function substractButton() {


    return {
      restrict: 'AE',
      replace: true,

      template: '<button class="b day"  ng-transclude ng-click="action()"></button>',
      transclude: true,
      scope: {

        action: '&onSubstract'

      }


    }

  }
]);

这里是plnker：

Answer 3

当然，您可以根据需要配置指令：

    <div substract-button date='date' type="week"></div>
    <div substract-button date='date' type="day"></div>

指令：

.directive('substractButton', function () {
        return {
            scope: {
                date: '=date',
                type: '@type'
            },
            restrict:'A',
            link:function ($scope, element, attrs) {
                $scope.substractVal = 0;
                if ($scope.type === "week") {
                    $scope.substractVal = 7;
                } else if ($scope.type === "day") {
                    $scope.substractVal = 1;
                }

                $scope.manageDay = function() {
                    var result = new Date($scope.date);
                    result.setDate($scope.date.getDate() - $scope.substractVal);
                    $scope.date = result;
                }
            },
            template: "<div class='sub l'>" +
            "<button class='b' ng-class='type' ng-click='manageDay()' ng-model='date'>substract a {{type}}</button>" +

＆＃34;＆＃34;};

这是小提琴：http://jsfiddle.net/oburakevych/rafJx/17/

可重复使用的按钮指令

3 个答案: