带指令的角度三向按钮

Question

我正在寻找这个问题的答案：

多状态按钮，例如angularJS中的切换

...但是使用指令。 主要原因是我试图实现隔离范围以创建可重用的按钮。 我努力了：

angular.module('myApp', [])
    .directive('buttonToggle', function() {
        return {
            restrict: 'A',
            scope: {
                myBtnArr: "="
            },
            myBtnTxt: ["AND", "OR", "NOT"],
            template: '<button>{{ myBtnTxt[myBtnArr] }} </button>'
        }
    });

在HTML中添加以下内容：

<div button-toggle my-btn-arr=0></div>

但是Angular似乎不喜欢这种风格，要么显示按钮而不显示文本，要么抛出神秘的a.match都不是函数错误。 有什么想法吗？

Answer 1

您需要修改指令以包括链接功能。 然后将myBtnTxt放在其中的示波器上。 像这样：

app.directive('buttonToggle', function() {
  return {
    restrict: 'A',
    scope: {
      myBtnArr: "="
      },
    template: '<button>{{myBtnTxt[myBtnArr]}}</button>',
    link: function(scope){
      scope.myBtnTxt = ["AND", "OR", "NOT"];
    }
  };
});