Angularjs 可重用按钮指令

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

<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>

---

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

你的看法：

<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'

      }


    }

  }
]);

app.directive（'substractButton'[
函数减法按钮（）{
返回{
限制：“AE”，
替换：正确，
模板：“”，
是的，
范围：{
操作：“&onSubstract”
}
}
}
]);

---

下面是：

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

    <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>" +

指令（'substractButton'，函数（）{ 返回{ 范围：{ 日期：'=日期'， 类型：“@type” }, 限制：'A'， 链接：函数（$scope，element，attrs）{ $scope.substractVal=0； 如果（$scope.type==“周”）{ $scope.substractVal=7； }else if（$scope.type==“day”）{ $scope.substractVal=1； } $scope.manageDay=函数（）{ var结果=新日期（$scope.Date）； result.setDate（$scope.date.getDate（）-$scope.substractVal）； $scope.date=结果； } }, 模板：“”+ “减法a{{type}”+ “}

这是小提琴：

var-app=angular.module（'testApp'，[]）；
app.directive（'telSavebutton'，function（）{
返回{
限制：'E'，
模板：“指令按钮”，
是的，
范围：{
onSubmit:“&”，
onFormSubmit:“&”
},
链接：功能（范围、元素、属性）{
scope.submit=函数（）{
scope.onSubmit（）；
}
}
}
});  
app.controller（'testCntler'，['$scope'，'$location'，函数（$scope，$location）{
$scope.testcontroller=function（）
{
警报（“工作”）
}
}]);

名字
中间名
姓
静态按钮

是的，谢谢你的回答。我使用了你的一段代码。你能解释一下=和@are是什么吗？@Mike基本上我创建了一个独立的作用域。“=”将双向绑定应用于指令中的作用域变量和父级（从中调用指令），而“@”只传递父级范围变量的值，如果父级变量更改，则不会更改。您可以在Angularjs网站上阅读更多内容，请参阅“隔离指令的范围”一节。您还可以添加解释吗？