javascript - 带指令的 Angular 三向按钮

Question

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

Multi State button like toggle in 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"];
    }
  };
});