0

function directive() {
  return {
    restrict: 'E',
    template: '<button ng-repeat="x in j.array" ng-click="j.set(x)">{{x}}</button>',
    replace: true,
    //scope: {},
    bindToController: {
      array: '=',
      answer: '='
    },
    controller: function() {
      var j = this;
      j.set = function(data) {
        j.answer = data;
      };
    },
    controllerAs: 'j'
  };
}

When I uncomment scope and create an isolate scope the directive no longer works. I'm trying to determine why.
Normally I still have access to the controllerAs in an ng-repeat, in this example when I lose it it's still available on $parent.j. I think there are 3 solutions.

Solution 1 is to leave it not in isolate scope.
Solution 2 would be to convert every reference to j inside the repeat to $parent.j.
Solution 3 is that there is some way to use j without having to use $parent that I'm unaware of.

Aleksey Solovey
  • 4,153
  • 3
  • 15
  • 34
Zack
  • 5
  • 1
  • Possible duplicate of [Why is `replace` property deprecated in AngularJS directives?](https://stackoverflow.com/questions/24194972/why-is-replace-property-deprecated-in-angularjs-directives/35545445#35545445). – georgeawg Nov 08 '18 at 10:39

1 Answers1

1

It may be to do with the replace: true. If you wrap the button in a div, it seems to work! I've made a little Plunker here to demonstrate.

Sophie
  • 2,000
  • 1
  • 12
  • 15