Angular Directive using '=' scope & controllerAs

Question

I'm trying to write a Directive to decode and encode some information. Basically I am storing 5 binary pieces of information in a database using an Int (giving each bit a value of 16, 8, 4, 2, 1).

I need to ways of editing the data: as an Int, and as bits. But I have lots of problems connecting them up, and these are (deliberately) compounded by using controllerAs notation.

1) When I change the Int nothing changes in the bits. This is because the link function only seems to load once - how can I have a change in a model update information in a Directive?

<input ng-model="c.int" type="text" />
<testdir score="c.int"></testdir>

My Directive includes:

scope: {
  score: '='
},
controller: function() {
  var vm = this;
  vm.recChange = function() {
    // convert bits to score
  }
},
controllerAs: 'd',
link: function(scope, elem, attrs) {
  // convert score to bits

and a link function that converts score into scope.recommendations, which is an array 5 bits.

2) When I change the bits (and have controllers using $scope) then the Int does change. But I cannot find a way to use controllerAs - the link function uses scope whereas my controller needs a d. prefix.

template: "<label ng-repeat='(key, recommendation) in recommendations' class='checkbox-inline'>

// template: "<label ng-repeat='(key, recommendation) in d.recommendations' class='checkbox-inline'> \

Plnkr

ryeballar · Accepted Answer · 2015-05-10 06:46:49Z

1

You have to use scope.score instead of using the attribute value of the score since you're using the two-way data binding notation = in your scope declaration for score. Additionally, when changes for a certain exists, then simply place watcher for that value and apply your changes therein.

UPDATE: Simply add your directive's name in the require key value of your directive definition, and you should be able to access your controller in your link function as the fourth argument.

FORKED PLUNKER

.directive('testdir', function() {
  var recommendationCategories = ['16RotM', '8Top5', '4Price', '2Cuisine', '1Area'];

  return {

    require: 'testdir',

    scope: {
      score: '='
    },

    controller: function () {
       // .....
    },

    controllerAs: 'd',

    link: function(scope, elem, attrs, ctrl) {

      console.log(ctrl);

      scope.$watch('score', function() {
        scope.recommendations = {};
        var score = parseInt(scope.score);
        // decode recommendations
        // convert to binary string
        var bitVal = score.toString(2);
        //pre-pad with "0"
        var e = recommendationCategories.length - bitVal.length;
        bitVal = "0".repeat(e) + bitVal;

        recommendationCategories.forEach(function (cat, idx) {
          scope.recommendations[cat] = {checked: (bitVal[idx]=="1") ? true : false};
        });

        // add a field for closed too
        scope.recommendations.closed = {checked : (score < 0)};
      });
    },
    template: "<label ng-repeat='(key, recommendation) in recommendations' class='checkbox-inline'> \
                <input type='checkbox' ng-model='recommendation.checked' ng-change='d.recChange()'/>{{key}} \
      -        </label>"
    // template: "<label ng-repeat='(key, recommendation) in d.recommendations' class='checkbox-inline'> \
  }

});

edited May 10, 2015 at 6:46

answered May 10, 2015 at 6:38

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

4 Comments

Simon H Over a year ago

Great - that solves part 1, but leaves part 2 of the question

ryeballar Over a year ago

It's actually in the $compile documentation

Simon H Over a year ago

Sorry, but am still struggling to get encoded value, vm.score, back out of the directive and into the parent plnkr.co/edit/PEWAzuPGJJleQqKW21Ds?p=preview

Simon H Over a year ago

... unless I use a $scope, which I'm trying to deprecate

Peter Morris · Accepted Answer · 2015-11-28 09:41:01Z

1

After your "controllerAs" value you need to add bindToController:true

answered Nov 28, 2015 at 9:41

Peter Morris

23.6k12 gold badges98 silver badges172 bronze badges

Collectives™ on Stack Overflow

Angular Directive using '=' scope & controllerAs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related