Angular Three Way Button with Directive

Question

I'm looking for an answer to this question:

Multi State button like toggle in angularJS

...but using a directive. The main reason being that I'm trying to achieve isolate scope in order to create a reusable button. I have tried:

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

With something like this in the HTML:

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

But Angular doesn't seem to like any flavor of this, either showing the button but not the text or throwing the cryptic a.match is not a function error. Thoughts?

you have myBtnArr attribute wrong way..it should be hyphen separated like my-btn-arr="someVariable" where as someVariable will be scope variable, which hold value of 0 — Pankaj Parkar
– Pankaj Parkar, Commented Jan 7, 2016 at 22:40
You are correct but that's because I incorrectly transcribed the html, edited. Your solution seems to me like it would not create isolate scope? — Raydot
– Raydot, Commented Jan 7, 2016 at 22:46
If I do that then it's a string and not a number, which is what the "=" is meant to process. — Raydot
– Raydot, Commented Jan 7, 2016 at 23:23

jbrown · Accepted Answer · 2016-01-07 23:29:32Z

1

You need to modify your directive to include a link function. Then place myBtnTxt on scope in there. Like so:

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

edited Jan 7, 2016 at 23:29

answered Jan 7, 2016 at 23:23

jbrown

3,0351 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raydot Over a year ago

Yep! Thanks jbrown!

Collectives™ on Stack Overflow

Angular Three Way Button with Directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related